/* Space Genius · base de la web ------------------------------------------ */
/* Todo va con :where() para que no gane especificidad sobre los estilos de cada pieza. */
.sg-page{max-width:1440px;width:100%;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;
  background:#04050B;color:#F4F6F8;font-family:'IBM Plex Sans',system-ui,sans-serif;overflow:hidden}
/* El tema (Hello) pone border-box a todo: aquí se devuelve al valor por defecto,
   que es con el que está dibujado el diseño. Las piezas que necesitan border-box lo llevan en su clase. */
:where(.sg-page) :where(*,*::before,*::after){box-sizing:content-box}
:where(.sg-page) :where(input,select,textarea,button){box-sizing:border-box}
:where(.sg-page) :where(img){max-width:100%;height:auto}
:where(.sg-page) :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0;padding:0}
:where(.sg-page) :where(ul,ol){list-style:none}
:where(.sg-page) :where(button,input,select,textarea){font:inherit}
:where(.sg-page) :where(a){text-decoration:none;color:inherit}
body.sg-body{margin:0;background:#04050B}

/* Escala tipográfica: seis tamaños, fluidos ------------------------------- */
:root{
  --t-small:14px;
  --t-body:clamp(16px,1.2vw,17px);
  --t-lead:clamp(18px,1.4vw,20px);
  --t-h3:clamp(22px,2vw,28px);
  --t-h2:clamp(24px,3.9vw,56px);
  --t-h1:clamp(40px,5.6vw,80px);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* Componentes del sistema visual ----------------------------------------- */

:where(.sg-page) a{color:#EE7FAF;text-decoration:none}
:where(.sg-page) a:hover{color:#F7A8CB}
.sg-space,.sg-nebula{position:relative;isolation:isolate;overflow:hidden;background-color:#05070F}
.sg-space{background-color:#2B3047;background-image:url(../img/estrellas.png),url(../img/nebulosa.webp);background-blend-mode:normal,multiply;background-size:1024px 1024px,cover;background-position:0 0,center;background-repeat:repeat,no-repeat}
.sg-nebula{background-image:url(../img/estrellas.png),url(../img/nebulosa.webp);background-size:1024px 1024px,cover;background-position:0 0,center;background-repeat:repeat,no-repeat}
.sg-space::before,.sg-nebula::before,.sg-space::after,.sg-nebula::after{content:"";position:absolute;inset:0;z-index:-1;background-image:url(../img/estrellas-titileo.png);pointer-events:none}
.sg-space::before,.sg-nebula::before{background-size:768px 768px;animation:sg-twinkle 5.5s ease-in-out infinite alternate}
.sg-space::after,.sg-nebula::after{background-size:560px 560px;background-position:230px 170px;animation:sg-twinkle 7.7s ease-in-out -3s infinite alternate-reverse}
@keyframes sg-twinkle{0%{opacity:.15}55%{opacity:1}100%{opacity:.4}}
/* cuadrícula de plano en las secciones claras: rasgo de la marca, se conserva a propósito */
.sg-blueprint{background-color:#F1F0EC;background-image:linear-gradient(rgba(19,31,44,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(19,31,44,.05) 1px,transparent 1px),linear-gradient(rgba(19,31,44,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(19,31,44,.075) 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px}
.sg-glass{background-color:#0E1428}
.sg-blur{background-color:rgba(13,18,38,.52);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sg-march{animation:sg-march 1.4s linear infinite}
@keyframes sg-march{to{stroke-dashoffset:-28}}
.sg-rule{display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:14px;opacity:.8}
.sg-hud{position:relative}
.sg-hud::before,.sg-hud::after{content:none}
.sg-hud::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-top-left-radius:20px}
.sg-hud::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-bottom-right-radius:20px}
.sg-r16::before{border-top-left-radius:16px}.sg-r16::after{border-bottom-right-radius:16px}
.sg-r18::before{border-top-left-radius:18px}.sg-r18::after{border-bottom-right-radius:18px}
.sg-r24::before{border-top-left-radius:24px}.sg-r24::after{border-bottom-right-radius:24px}
.sg-hud-l::before,.sg-hud-l::after{border-color:#C2185B}
.sg-glow{color:#EE7FAF}
.sg-glow-l{color:#C2185B}
.sg-nav a:hover{color:#FFFFFF !important}
.sg-btn{transition:transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease}
.sg-btn:active{transform:scale(.97)}
.sg-primary:hover{background-color:#F7A8CB !important;color:#0B1426 !important}
.sg-ghost:hover{background-color:rgba(255,255,255,.16) !important;color:#FFFFFF !important}
.sg-ghost-l:hover{border-color:#C2185B !important;color:#131F2C !important}
.sg-q{transition:border-color .15s ease, background-color .15s ease}
.sg-q:hover{border-color:#C2185B !important}
.sg-foot a:hover{color:#FFFFFF !important}
.sg-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#EE7FAF;vertical-align:middle;margin-right:12px}
.sg-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:#EE7FAF;animation:sg-pulse 2.2s var(--ease-out) infinite}
@keyframes sg-pulse{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.25);opacity:0}}
.sg-comet{position:absolute;left:0;top:0;offset-rotate:auto;offset-anchor:92% 34%;filter:drop-shadow(0 0 6px rgba(255,236,200,.85)) drop-shadow(0 0 16px rgba(238,127,175,.6));animation:sg-fly 16s linear infinite;pointer-events:none}
.sg-depth{animation:sg-fly 16s linear infinite,sg-depth 16s linear infinite}
.sg-depth>svg{transform-origin:92% 34%;animation:sg-depth-s 16s linear infinite}
@keyframes sg-fly{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes sg-depth{0%{z-index:4;opacity:.95}25%{z-index:4;opacity:1}49.9%{z-index:4;opacity:.95}50%{z-index:1;opacity:.9}75%{z-index:1;opacity:.72}100%{z-index:1;opacity:.9}}
@keyframes sg-depth-s{0%{scale:.86}25%{scale:1.08}50%{scale:.86}75%{scale:.62}100%{scale:.86}}
.sg-slow,.sg-slow>svg{animation-duration:26s !important}
.sg-transfer{animation:sg-transfer 7s ease-in-out infinite}
@keyframes sg-transfer{0%{offset-distance:0%;opacity:0}10%{opacity:1}80%{offset-distance:100%;opacity:1}90%,100%{offset-distance:100%;opacity:0}}
.sg-loopdot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#EE7FAF;box-shadow:0 0 14px 4px rgba(238,127,175,.75);offset-rotate:0deg;animation:sg-fly 10s linear infinite;pointer-events:none}
.sg-loopdot-l{background:#C2185B;box-shadow:0 0 12px 3px rgba(194,24,91,.55)}
.sg-shoot{position:absolute;z-index:-1;width:120px;height:2px;border-radius:2px;background:#F7D3E3;rotate:-24deg;opacity:0;pointer-events:none;animation:sg-shoot 12s ease-in infinite}
@keyframes sg-shoot{0%{translate:0 0;opacity:0}2%{opacity:1}8%{translate:-475px 211px;opacity:0}100%{translate:-475px 211px;opacity:0}}
.sg-scanline{position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,rgba(238,127,175,0),rgba(238,127,175,.10),rgba(238,127,175,0));pointer-events:none;animation:sg-scan 6s ease-in-out infinite}
@keyframes sg-scan{0%{translate:0 -100px}100%{translate:0 560px}}
.sg-float{animation:sg-float 7s ease-in-out infinite}
@keyframes sg-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
.sg-pausado,.sg-pausado *,.sg-pausado::before,.sg-pausado::after,.sg-pausado *::before,.sg-pausado *::after{animation-play-state:paused !important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #EE7FAF;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .sg-space::before,.sg-nebula::before,.sg-space::after,.sg-nebula::after,
  .sg-comet,.sg-depth>svg,.sg-transfer,.sg-shoot,.sg-loopdot,.sg-march,.sg-float,
  .sg-scanline,.sg-live,.sg-live::after,.sg-hero-marco img{animation:none !important}
  .sg-btn:hover,.sg-btn:active,.sg-menu-movil>summary:active{transform:none !important}
  .sg-s094:hover svg,.sg-s106:hover svg,.sg-btn:hover svg{transform:none !important}
}

.sg-sc{display:contents}

/* Estilos de cada pieza, extraídos del prototipo -------------------------- */
.sg-s001{left: 1180px; top: 60px; animation-delay: 0.0s}
.sg-s002{left: 980px; top: 20px; animation-delay: 4.2s}
.sg-s003{left: 1320px; top: 180px; animation-delay: 8.1s}
.sg-s004{position: relative; z-index: 5; height: 88px; box-sizing: border-box; padding: 0 120px; display: flex; align-items: center; justify-content: space-between}
.sg-s005{display: flex; align-items: center}
.sg-s006{width: 127px; height: 40px; display: block}
.sg-s007{display: flex; align-items: center; gap: 32px}
.sg-s008{font-size: var(--t-small); font-weight: 500; color: #B6B9C2; padding: 10px 0; border-bottom: 2px solid transparent}
.sg-s009{display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 26px; box-sizing: border-box; border-radius: 999px; background: #EE7FAF; color: #0B1426; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-small); font-weight: 600; white-space: nowrap}
.sg-s010{padding: 52px 120px 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center}
.sg-s011{grid-column: span 7; display: flex; flex-direction: column; gap: 28px}
.sg-s012{margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); line-height: 1.4; letter-spacing: 0; text-transform: none; color: #EE7FAF}
.sg-s013{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; color: #F4F6F8}
.sg-s014{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #B6B9C2}
.sg-s015{display: flex; gap: 14px; align-items: center; flex-wrap: wrap}
.sg-s016{display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; box-sizing: border-box; border-radius: 999px; background: #EE7FAF; color: #0B1426; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600; white-space: nowrap}
.sg-s017{display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; box-sizing: border-box; border-radius: 999px; background: rgba(255,255,255,0.09); color: #F4F6F8; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 500; white-space: nowrap}
.sg-s018{grid-column: span 5; display: flex; justify-content: flex-end}
.sg-s019{position: relative; width: 488px; height: 540px}
.sg-s020{position: absolute; left: 0; top: 0; z-index: 1; overflow: visible}
.sg-s021{position: absolute; z-index: 2; left: 24px; top: 52px; width: 440px; box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(238,127,175,0.28); box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 40px rgba(238,127,175,0.06)}
.sg-s022{position: relative; overflow: hidden; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 18px}
.sg-s023{display: flex; justify-content: space-between; align-items: center; gap: 12px}
.sg-s024{display: inline-flex; align-items: center; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600; color: #F4F6F8}
.sg-s025{font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; text-transform: none; white-space: nowrap; color: #A9ABAE}
.sg-s026{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
.sg-s027{display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(5,7,15,0.55); border: 1px solid rgba(169,171,174,0.16)}
.sg-s028{font-size: var(--t-small); color: #A9ABAE}
.sg-s029{font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; color: #F4F6F8}
.sg-s030{font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; color: #EE7FAF}
.sg-s031{display: flex; flex-direction: column; gap: 6px}
.sg-s032{font-size: var(--t-small); color: #A9ABAE}
.sg-s033{position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none}
.sg-s034{width: 112px; height: 34px; offset-path: path('M -10.2 325.4 A 262 98 -14 0 0 498.2 198.6 A 262 98 -14 0 0 -10.2 325.4')}
.sg-s035{display: block; overflow: visible}
.sg-s036{position: relative; padding: 22px 120px; display: flex; justify-content: space-between; gap: 24px; background: rgba(5,7,15,0.45)}
.sg-s037{display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-small); color: #A9ABAE}
.sg-s038{width: 6px; height: 6px; border-radius: 999px; background: #EE7FAF}
.sg-s039{padding: 88px 120px}
.sg-s040{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start}
.sg-s041{grid-column: span 5; display: flex; flex-direction: column; gap: 22px}
.sg-s042{margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); line-height: 1.4; letter-spacing: 0; text-transform: none; color: #C2185B}
.sg-s043{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #131F2C}
.sg-s044{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #565C64}
.sg-s045{margin: 0; font-size: var(--t-small); line-height: 1.5; color: #565C64}
.sg-s046{grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 12px}
.sg-s047{display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; box-sizing: border-box; padding: 15px 20px; border-radius: 14px; text-align: left; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); line-height: 1.45; color: #131F2C; border: 1.5px solid #E52276; background: #FDE8F1; box-shadow: 0 0 0 3px rgba(238,127,175,0.18)}
.sg-s048{flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: #EE7FAF; color: #05070F; display: flex; align-items: center; justify-content: center}
.sg-s049{display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; box-sizing: border-box; padding: 15px 20px; border-radius: 14px; text-align: left; cursor: pointer; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); line-height: 1.45; color: #131F2C; border: 1.5px solid #D6D2C8; background: #FFFFFF}
.sg-s050{flex-shrink: 0; width: 26px; height: 26px; box-sizing: border-box; border-radius: 999px; border: 2px solid #9AA0A8}
.sg-s051{height: 200px; box-sizing: border-box; padding: 26px 28px; border-radius: 16px; display: flex; flex-direction: column; justify-content: center}
.sg-s052{display: flex; flex-direction: column; gap: 16px}
.sg-s053{margin: 0; font-size: var(--t-body); line-height: 1.55; color: #C9CBCE}
.sg-s054{align-self: flex-start; height: 50px; padding: 0 24px; border-radius: 999px; border: 0; background: #EE7FAF; color: #0B1426; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600; cursor: pointer}
.sg-s055{display: flex; flex-direction: column; gap: 10px}
.sg-s056{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; color: #F4F6F8}
.sg-s057{margin: 0; font-size: var(--t-body); line-height: 1.55; color: #C9CBCE}
.sg-s058{display: flex; gap: 14px; align-items: center}
.sg-s059{height: 44px; padding: 0 6px; border: 0; background: transparent; color: #A9ABAE; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-small); font-weight: 500; text-decoration: underline; cursor: pointer}
.sg-s060{display: flex; flex-direction: column; gap: 22px; max-width: 900px}
.sg-s061{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #F4F6F8}
.sg-s062{margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px}
.sg-s063{display: flex; flex-direction: column; gap: 12px; padding: 28px; box-sizing: border-box; border-radius: 18px}
.sg-s064{font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: #EE7FAF}
.sg-s065{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #F4F6F8}
.sg-s066{margin: 0; font-size: var(--t-body); line-height: 1.65; color: #CDD0D6}
.sg-s067{margin-top: 48px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 40px; border-radius: 20px}
.sg-s068{grid-column: span 5; display: flex; flex-direction: column; gap: 14px}
.sg-s069{margin: 0; font-size: var(--t-small); line-height: 1.5; color: #A9ABAE}
.sg-s070{grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 18px}
.sg-s071{display: flex; flex-direction: column; gap: 14px}
.sg-s072{display: flex; align-items: center; gap: 16px}
.sg-s073{width: 150px; font-size: var(--t-small); color: #A9ABAE}
.sg-s074{position: relative; flex-grow: 1; height: 16px; border-radius: 999px; background: rgba(169,171,174,0.14)}
.sg-s075{position: absolute; left: 0; top: 0; width: 63.6%; height: 16px; border-radius: 999px; background: #5B6F94}
.sg-s076{width: 70px; text-align: right; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-lead); font-weight: 600; color: #F4F6F8}
.sg-s077{position: absolute; left: 0; top: 0; width: 41.4%; height: 16px; border-radius: 999px; background: #5B6F94}
.sg-s078{position: absolute; left: 41.4%; top: -6px; width: 22.2%; height: 28px; box-sizing: border-box; border: 1.5px dashed #EE7FAF; border-radius: 8px; box-shadow: 0 0 14px rgba(238,127,175,0.35)}
.sg-s079{margin: 48px 0 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; line-height: 1.2; color: #F4F6F8}
.sg-s080{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center}
.sg-s081{grid-column: span 6; display: flex; flex-direction: column; gap: 22px}
.sg-s082{margin: 0; font-size: var(--t-lead); line-height: 1.65; color: #3A4048}
.sg-s083{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; line-height: 1.3; color: #131F2C}
.sg-s084{grid-column: 8 / span 5; display: flex; justify-content: center}
.sg-s085{display: flex; flex-direction: column; gap: 22px; max-width: 860px}
.sg-s086{margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px}
.sg-s087{display: flex; flex-direction: column; gap: 20px; padding: 40px; box-sizing: border-box; border-radius: 24px}
.sg-s088{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #F4F6F8}
.sg-s089{margin: 0; font-size: var(--t-body); line-height: 1.65; color: #CDD0D6}
.sg-s090{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px}
.sg-s091{display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body); line-height: 1.5; color: #C9CBCE}
.sg-s092{margin-top: 8px; width: 7px; height: 7px; flex-shrink: 0; border-radius: 999px; background: #EE7FAF}
.sg-s093{margin-top: auto; padding-top: 8px}
.sg-s094{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #EE7FAF; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600}
.sg-s095{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #131F2C}
.sg-s096{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #565C64}
.sg-s097{margin-top: 48px}
.sg-s098{position: relative; width: 1200px; height: 140px}
.sg-s099{position: absolute; left: 0; top: 0}
.sg-s100{offset-path: path('M 141.0 44 L 1059.0 44 L 1059.0 76 C 939.0 132, 261.0 132, 141.0 80 L 141.0 44')}
.sg-s101{margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px}
.sg-s102{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #131F2C}
.sg-s103{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-lead); font-weight: 500; font-style: italic; color: #C2185B}
.sg-s104{margin: 0; font-size: var(--t-body); line-height: 1.65; color: #3A4048}
.sg-s105{margin-top: 36px}
.sg-s106{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #C2185B; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600}
.sg-s107{display: flex; flex-direction: column; gap: 18px; padding: 32px; box-sizing: border-box; border-radius: 20px}
.sg-s108{display: flex; justify-content: space-between; gap: 12px}
.sg-s109{font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: #EE7FAF; color: #A9ABAE}
.sg-s110{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #F4F6F8}
.sg-s111{display: flex; flex-direction: column; gap: 6px; padding-top: 16px}
.sg-s112{margin: 0; font-size: var(--t-body); line-height: 1.6; color: #EE7FAF}
.sg-s113{margin-top: 36px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 32px}
.sg-s114{margin: 0; font-size: var(--t-lead); line-height: 1.65; color: #CDD0D6; color: #F4F6F8; font-weight: 500}
.sg-s115{display: flex; gap: 10px; flex-wrap: wrap}
.sg-s116{display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(238,127,175,0.32); background: rgba(238,127,175,0.06); font-size: var(--t-small); color: #F4F6F8}
.sg-s117{grid-column: span 4}
.sg-s118{width: 384px; height: 420px; box-sizing: border-box; border: 1.5px dashed rgba(19,31,44,0.35); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: #565C64}
.sg-s119{grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 22px}
.sg-s120{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #131F2C}
.sg-s121{padding: 112px 120px}
.sg-s122{left: 1260px; top: 40px; animation-delay: 2.0s}
.sg-s123{left: 520px; top: 30px; animation-delay: 7.5s}
.sg-s124{position: absolute; left: 0; top: 50%; margin-top: -340px; width: 1440px; height: 680px; pointer-events: none}
.sg-s125{width: 112px; height: 34px; offset-path: path('M 40.9 375.6 A 680 282 -3 0 0 1399.1 304.4 A 680 282 -3 0 0 40.9 375.6')}
.sg-s126{position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center}
.sg-s127{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.07; letter-spacing: -0.015em; color: #F4F6F8; max-width: 1000px}
.sg-s128{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #B6B9C2; max-width: 640px}
.sg-s129{display: flex; gap: 14px; justify-content: center}
.sg-s130{flex-grow: 1; padding: 72px 120px 40px; display: flex; flex-direction: column; gap: 48px}
.sg-s131{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px}
.sg-s132{grid-column: span 4; display: flex; flex-direction: column; gap: 18px}
.sg-s133{width: 152px; height: 48px; display: block}
.sg-s134{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; color: #F4F6F8}
.sg-s135{grid-column: span 2; display: flex; flex-direction: column; gap: 6px}
.sg-s136{font-size: var(--t-small); color: #A9ABAE; min-height: 32px; display: inline-flex; align-items: center}
.sg-s137{grid-column: span 4; display: flex; flex-direction: column; gap: 14px}
.sg-s138{margin: 0; font-size: var(--t-small); line-height: 1.6; color: #A9ABAE}
.sg-s139{display: flex; gap: 10px}
.sg-s140{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0)}
.sg-s141{flex-grow: 1; height: 48px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(238,127,175,0.35); background: rgba(255,255,255,0.05); color: #F4F6F8; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-small)}
.sg-s142{height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: #EE7FAF; color: #0B1426; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-small); font-weight: 600; cursor: pointer}
.sg-s143{padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; font-size: var(--t-small); color: #A9ABAE}
.sg-s144{display: flex; gap: 20px}
.sg-s145{color: #A9ABAE}
.sg-s146{font-size: var(--t-small); font-weight: 500; color: #F4F6F8; padding: 10px 0; border-bottom: 2px solid #EE7FAF}
.sg-s147{padding: 64px 120px 88px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center}
.sg-s148{grid-column: span 7; display: flex; flex-direction: column; gap: 26px}
.sg-s149{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; color: #F4F6F8}
.sg-s150{display: flex; gap: 14px; flex-wrap: wrap}
.sg-s151{position: relative; width: 488px; height: 440px}
.sg-s152{position: absolute; z-index: 2; left: 24px; top: 40px; width: 440px; box-sizing: border-box; border-radius: 20px; border: 1px solid rgba(238,127,175,0.28); box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 40px rgba(238,127,175,0.06)}
.sg-s153{position: relative; overflow: hidden; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 16px}
.sg-s154{display: flex; gap: 18px; font-size: var(--t-small); color: #A9ABAE}
.sg-s155{display: inline-flex; align-items: center; gap: 6px}
.sg-s156{width: 10px; height: 10px; border-radius: 2px; background: #EE7FAF}
.sg-s157{width: 10px; height: 10px; border-radius: 2px; background: #5B6F94}
.sg-s158{width: 112px; height: 34px; offset-path: path('M -10.2 257.4 A 262 90 -14 0 0 498.2 130.6 A 262 90 -14 0 0 -10.2 257.4')}
.sg-s159{padding: 96px 120px; color: #131F2C}
.sg-s160{display: flex; flex-direction: column; gap: 22px; max-width: 880px}
.sg-s161{margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch}
.sg-s162{display: flex; flex-direction: column; gap: 14px; padding: 36px; box-sizing: border-box; border-radius: 20px; background: #FFFFFF}
.sg-s163{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #131F2C}
.sg-s164{display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body); line-height: 1.5; color: #3A4048}
.sg-s165{margin-top: 8px; width: 7px; height: 7px; flex-shrink: 0; border-radius: 999px; background: #E52276}
.sg-s166{margin: 44px 0 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: #131F2C}
.sg-s167{padding: 96px 120px}
.sg-s168{margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch}
.sg-s169{display: flex; flex-direction: column; gap: 14px; padding: 32px; box-sizing: border-box; border-radius: 20px}
.sg-s170{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-lead); font-style: italic; font-weight: 500; line-height: 1.4; color: #EE7FAF}
.sg-s171{margin: 0; font-size: var(--t-small); line-height: 1.65; color: #CDD0D6}
.sg-s172{margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px}
.sg-s173{margin: 0; font-size: var(--t-small); line-height: 1.5; color: #F4F6F8}
.sg-s174{display: flex; flex-direction: column; gap: 14px; padding: 32px; box-sizing: border-box; border-radius: 20px; background: rgba(238,127,175,0.09); border-color: rgba(238,127,175,0.5)}
.sg-s175{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #F4F6F8}
.sg-s176{margin-top: auto}
.sg-s177{grid-column: span 7; display: flex; flex-direction: column; gap: 20px}
.sg-s178{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #131F2C}
.sg-s179{grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 20px; background: #FFFFFF}
.sg-s180{font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: #C2185B}
.sg-s181{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #131F2C}
.sg-s182{margin: 0; font-size: var(--t-small); line-height: 1.65; color: #3A4048}
.sg-s183{margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px}
.sg-s184{display: flex; flex-direction: column; gap: 10px; padding: 24px 0}
.sg-s185{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.01em; color: #131F2C}
.sg-s186{padding: 120px 120px}
.sg-s187{width: 112px; height: 34px; offset-path: path('M 40.9 375.6 A 680 222 -3 0 0 1399.1 304.4 A 680 222 -3 0 0 40.9 375.6')}
.sg-s188{position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center}
.sg-s189{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #F4F6F8; max-width: 980px}
.sg-s190{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #B6B9C2; max-width: 680px}
.sg-s191{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; color: #F4F6F8}
.sg-s192{position: relative; width: 470px; height: 450px}
.sg-s193{position: absolute; left: 0; top: 0; overflow: visible}
.sg-s194{width: 7px; height: 7px; opacity: 0.7; background: #F4F6F8; box-shadow: 0 0 10px 2px rgba(244,246,248,0.6); offset-path: path('M 440 225 A 190 190 0 1 1 60 225 A 190 190 0 1 1 440 225'); animation-duration: 34s; animation-direction: normal}
.sg-s195{width: 10px; height: 10px; offset-path: path('M 342 225 A 92 92 0 1 1 158 225 A 92 92 0 1 1 342 225'); animation-duration: 9s}
.sg-s196{width: 96px; height: 29px; offset-path: path('M 342 225 A 141 132 0 0 0 60 225')}
.sg-s197{margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch}
.sg-s198{display: flex; flex-direction: column; gap: 14px; padding: 28px; box-sizing: border-box; border-radius: 20px; background: #FFFFFF}
.sg-s199{display: flex; flex-direction: column; gap: 14px; padding: 36px; box-sizing: border-box; border-radius: 20px}
.sg-s200{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #F4F6F8}
.sg-s201{grid-column: 8 / span 5; display: flex; flex-direction: column}
.sg-s202{display: flex; flex-direction: column; gap: 8px; padding: 24px 0}
.sg-s203{margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch}
.sg-s204{margin-top: 36px; display: flex; align-items: center; justify-content: center; height: 120px; border: 1.5px dashed rgba(19,31,44,0.3); border-radius: 18px; background: rgba(255,255,255,0.5); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: #565C64}
.sg-s205{margin-top: 28px}
.sg-s206{width: 112px; height: 34px; offset-path: path('M 40.9 375.6 A 680 256 -3 0 0 1399.1 304.4 A 680 256 -3 0 0 40.9 375.6')}
.sg-s207{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; color: #F4F6F8}
.sg-s208{position: relative; width: 460px; height: 460px}
.sg-s209{width: 96px; height: 29px; offset-path: path('M 60 230 A 170 170 0 1 1 400 230 A 170 170 0 1 1 60 230'); animation-duration: 14s}
.sg-s210{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 36px 0}
.sg-s211{grid-column: span 1; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h1); font-weight: 600; line-height: 0.9; color: #C2185B}
.sg-s212{grid-column: 2 / span 4; display: flex; flex-direction: column; gap: 10px}
.sg-s213{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.01em; color: #131F2C}
.sg-s214{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-lead); font-style: italic; font-weight: 500; color: #C2185B}
.sg-s215{grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 8px}
.sg-s216{grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 8px}
.sg-s217{margin-top: 48px; display: flex; gap: 12px; align-items: stretch}
.sg-s218{display: flex; flex-direction: column; gap: 10px; padding: 24px; box-sizing: border-box; border-radius: 18px; flex: 1 1 0}
.sg-s219{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-lead); font-weight: 600; line-height: 1.3; color: #F4F6F8}
.sg-s220{align-self: center; color: #EE7FAF}
.sg-s221{display: flex; flex-direction: column; gap: 10px; padding: 24px; box-sizing: border-box; border-radius: 18px; flex: 1 1 0; background: rgba(238,127,175,0.10); border-color: rgba(238,127,175,0.55)}
.sg-s222{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.015em; color: #131F2C; max-width: 980px}
.sg-s223{margin: 0; font-size: var(--t-lead); line-height: 1.6; color: #565C64; max-width: 680px}
.sg-s224{margin: 0; font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.02em; color: #F4F6F8}
.sg-s225{width: 380px; height: 349px; display: block; filter: drop-shadow(0 0 36px rgba(238,127,175,0.35))}
.sg-s226{display: flex; flex-direction: column; gap: 18px; padding: 32px; box-sizing: border-box; border-radius: 20px; background: #FFFFFF}
.sg-s227{font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: #C2185B; color: #565C64}
.sg-s228{display: flex; flex-direction: column; gap: 6px; padding-top: 16px}
.sg-s229{margin: 0; font-size: var(--t-body); line-height: 1.6; color: #C2185B}
.sg-s230{margin-top: 28px; display: flex; align-items: center; justify-content: center; height: 110px; border: 1.5px dashed rgba(238,127,175,0.35); border-radius: 18px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: #A9ABAE}
.sg-s231{display: flex; flex-direction: column; gap: 14px; padding: 30px; box-sizing: border-box; border-radius: 20px; background: #FFFFFF}
.sg-s232{align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(194,24,91,0.07); border: 1px solid rgba(194,24,91,0.4); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: #C2185B}
.sg-s233{display: flex; flex-direction: column; gap: 6px; padding-top: 14px}
.sg-s234{margin: 0; font-size: var(--t-small); color: #C2185B}
.sg-s235{width: 112px; height: 34px; offset-path: path('M 40.9 375.6 A 680 205 -3 0 0 1399.1 304.4 A 680 205 -3 0 0 40.9 375.6')}
.sg-s236{width: 460px; height: 422px; display: block; filter: drop-shadow(0 0 40px rgba(238,127,175,0.35))}
.sg-s237{margin: 0; font-size: var(--t-body); line-height: 1.65; color: #3A4048}
.sg-s238{display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid rgba(169,171,174,0.3)}
.sg-s239{font-family: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-h2); font-weight: 600; color: #F4F6F8}
.sg-s240{display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid #EE7FAF}
.sg-s241{width: 384px; height: 460px; box-sizing: border-box; border: 1.5px dashed rgba(19,31,44,0.35); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); letter-spacing: 0; color: #565C64}
.sg-s242{display: flex; flex-direction: column; gap: 14px; padding: 28px; box-sizing: border-box; border-radius: 20px}
.sg-s243{padding: 64px 120px 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center}
.sg-s244{grid-column: span 6; display: flex; flex-direction: column; gap: 26px}
.sg-s245{display: flex; flex-direction: column; gap: 14px; margin-top: 8px}
.sg-s246{display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-lead); color: #F4F6F8}
.sg-s247{grid-column: span 6; display: flex; justify-content: flex-end}
.sg-s248{width: 540px; box-sizing: border-box; padding: 36px; border-radius: 24px; background: #F1F0EC; display: flex; flex-direction: column; gap: 16px}
.sg-s249{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px}
.sg-s250{font-size: var(--t-small); font-weight: 500; color: #131F2C}
.sg-s251{height: 48px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid #CFCBC1; background: #FFFFFF; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); color: #131F2C}
.sg-s252{color: #565C64; font-weight: 400}
.sg-s253{height: 48px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid #CFCBC1; background: #FFFFFF; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); color: #131F2C}
.sg-s254{box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid #CFCBC1; background: #FFFFFF; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); line-height: 1.5; color: #131F2C; resize: vertical}
.sg-s255{display: flex; gap: 10px; align-items: flex-start}
.sg-s256{margin-top: 3px; width: 20px; height: 20px; flex-shrink: 0; accent-color: #E52276}
.sg-s257{font-size: var(--t-small); line-height: 1.5; color: #565C64}
.sg-s258{color: #C2185B; text-decoration: underline}
.sg-s259{height: 54px; border-radius: 999px; border: 0; background: #EE7FAF; color: #0B1426; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: var(--t-body); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px}
.sg-s260{display: flex; gap: 20px; padding: 22px 0}
.sg-s261{grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 16px}
.sg-s262{height: 300px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; box-sizing: border-box; border: 1.5px dashed rgba(19,31,44,0.3); border-radius: 18px; background: rgba(255,255,255,0.5); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: var(--t-small); line-height: 1.8; letter-spacing: 0; color: #565C64}

/* Ajustes propios de la web (no existen en el prototipo de lienzo) ---------- */
.sg-page .sg-nav{flex-wrap:wrap}
@media (max-width: 980px){
  .sg-page .sg-nav{display:none}
  .sg-page .sg-menu-movil{display:block}
}
@media (min-width: 981px){
  .sg-page .sg-menu-movil{display:none}
}
/* Menú del móvil: un desplegable <details>, funciona sin JavaScript */
.sg-menu-movil{position:relative;margin-left:auto}
.sg-menu-movil>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;box-sizing:border-box;border-radius:999px;background:#EE7FAF;color:#0B1426;font-size: var(--t-small);font-weight:600;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color 150ms ease, transform 160ms var(--ease-out)}
.sg-menu-movil>summary::-webkit-details-marker{display:none}
.sg-menu-movil>summary:active{transform:scale(.97)}
.sg-menu-movil[open]>summary{background:#F7A8CB}
.sg-menu-movil .sg-ico-cerrar,.sg-menu-movil[open] .sg-ico-abrir{display:none}
.sg-menu-movil[open] .sg-ico-cerrar{display:block}
.sg-menu-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:30;width:min(320px, calc(100vw - 32px));box-sizing:border-box;padding:10px;border-radius:20px;background:#1A2140;display:flex;flex-direction:column;transform-origin:top right}
.sg-menu-panel .sg-s008,.sg-menu-panel .sg-s146{display:block;padding:14px 14px;border:0;border-radius:12px;font-size: var(--t-body);color:#F4F6F8}
.sg-menu-panel .sg-s146{color:#EE7FAF}
.sg-menu-panel .sg-s008:active{background:#161D36}
.sg-menu-panel .sg-s009{margin-top:8px;height:52px}
@media (prefers-reduced-motion: no-preference){
  .sg-menu-movil[open] .sg-menu-panel{animation:sg-menu-in 180ms var(--ease-out)}
}
@keyframes sg-menu-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (max-width: 980px){
  :where(.sg-page) svg{max-width:100%;height:auto}
  /* que ningún bloque ancho estire a su contenedor */
  :where(.sg-page) :where(section) :where(div,form,article,ul,p){min-width:0}
}
@media (max-width: 680px){
  .sg-page{overflow-x:hidden}
  :where(.sg-page) .sg-hud::before,:where(.sg-page) .sg-hud::after{width:22px;height:22px}
  /* el botón del test mantiene el círculo y el texto en la misma línea */
  .sg-page .sg-q{flex-wrap:nowrap}
}
@media print{
  .sg-comet,.sg-shoot,.sg-loopdot,.sg-scanline{display:none}
}

/* ---------- portátil ---------- */
@media (max-width: 1280px){
.sg-s004{padding:0px 56px 0px}
.sg-s010{padding:44px 56px 61px}
.sg-s013{}
.sg-s036{padding:19px 56px 19px}
.sg-s039{padding:75px 56px 75px}
.sg-s043{}
.sg-s061{}
.sg-s062{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-s079{}
.sg-s088{}
.sg-s095{}
.sg-s098{zoom:0.97}
.sg-s101{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-s120{}
.sg-s121{padding:95px 56px 95px}
.sg-s127{}
.sg-s130{padding:61px 56px 34px}
.sg-s147{padding:54px 56px 75px}
.sg-s149{}
.sg-s159{padding:82px 56px 82px}
.sg-s166{}
.sg-s167{padding:82px 56px 82px}
.sg-s168{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-s178{}
.sg-s186{padding:102px 56px 102px}
.sg-s189{}
.sg-s191{}
.sg-s197{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-s203{grid-template-columns:repeat(2,minmax(0,1fr))}
.sg-s207{}
.sg-s211{}
.sg-s213{}
.sg-s222{}
.sg-s224{}
.sg-s239{}
.sg-s243{padding:54px 56px 82px}
}

/* ---------- tablet ---------- */
@media (max-width: 980px){
.sg-s004{padding:0px 40px 0px}
.sg-s010{padding:36px 40px 50px}
.sg-s010{display:flex;flex-direction:column;gap:28px}
.sg-s013{}
.sg-s036{padding:15px 40px 15px}
.sg-s039{padding:62px 40px 62px}
.sg-s040{display:flex;flex-direction:column;gap:28px}
.sg-s043{}
.sg-s061{}
.sg-s067{display:flex;flex-direction:column;gap:28px}
.sg-s079{}
.sg-s080{display:flex;flex-direction:column;gap:28px}
.sg-s088{}
.sg-s095{}
.sg-s098{zoom:0.75}
.sg-s120{}
.sg-s121{padding:78px 40px 78px}
.sg-s124{display:none}
.sg-s127{}
.sg-s130{padding:50px 40px 28px}
.sg-s131{display:flex;flex-direction:column;gap:28px}
.sg-s147{padding:45px 40px 62px}
.sg-s147{display:flex;flex-direction:column;gap:28px}
.sg-s149{}
.sg-s159{padding:67px 40px 67px}
.sg-s166{}
.sg-s167{padding:67px 40px 67px}
.sg-s178{}
.sg-s186{padding:84px 40px 84px}
.sg-s189{}
.sg-s191{}
.sg-s207{}
.sg-s210{display:flex;flex-direction:column;gap:28px}
.sg-s211{}
.sg-s213{}
.sg-s222{}
.sg-s224{}
.sg-s239{}
.sg-s243{padding:45px 40px 67px}
.sg-s243{display:flex;flex-direction:column;gap:28px}
}

/* ---------- móvil ---------- */
@media (max-width: 680px){
.sg-s004{padding:0px 20px 0px}
.sg-s004{flex-wrap:wrap}
.sg-s005{flex-wrap:wrap}
.sg-s007{flex-wrap:wrap}
.sg-s010{padding:29px 20px 40px}
.sg-s013{}
.sg-s015{flex-wrap:wrap}
.sg-s018{flex-wrap:wrap}
.sg-s023{flex-wrap:wrap}
.sg-s026{display:flex;flex-direction:column}
.sg-s036{padding:12px 20px 12px}
.sg-s036{flex-wrap:wrap}
.sg-s039{padding:48px 20px 48px}
.sg-s043{}
.sg-s047{flex-wrap:wrap}
.sg-s048{flex-wrap:wrap}
.sg-s049{flex-wrap:wrap}
.sg-s058{flex-wrap:wrap}
.sg-s061{}
.sg-s062{display:flex;flex-direction:column}
.sg-s072{flex-wrap:wrap}
.sg-s079{}
.sg-s084{flex-wrap:wrap}
.sg-s086{display:flex;flex-direction:column}
.sg-s088{}
.sg-s091{flex-wrap:wrap}
.sg-s095{}
.sg-s098{display:none}
.sg-s101{display:flex;flex-direction:column}
.sg-s108{flex-wrap:wrap}
.sg-s113{flex-wrap:wrap}
.sg-s115{flex-wrap:wrap}
.sg-s118{flex-wrap:wrap}
.sg-s120{}
.sg-s121{padding:62px 20px 62px}
.sg-s124{display:none}
.sg-s127{}
.sg-s129{flex-wrap:wrap}
.sg-s130{padding:40px 20px 22px}
.sg-s139{flex-wrap:wrap}
.sg-s143{flex-wrap:wrap}
.sg-s144{flex-wrap:wrap}
.sg-s147{padding:35px 20px 48px}
.sg-s149{}
.sg-s150{flex-wrap:wrap}
.sg-s154{flex-wrap:wrap}
.sg-s159{padding:53px 20px 53px}
.sg-s161{display:flex;flex-direction:column}
.sg-s166{}
.sg-s167{padding:53px 20px 53px}
.sg-s168{display:flex;flex-direction:column}
.sg-s178{}
.sg-s183{display:flex;flex-direction:column}
.sg-s186{padding:66px 20px 66px}
.sg-s189{}
.sg-s191{}
.sg-s197{display:flex;flex-direction:column}
.sg-s203{display:flex;flex-direction:column}
.sg-s204{flex-wrap:wrap}
.sg-s207{}
.sg-s211{}
.sg-s213{}
.sg-s217{flex-wrap:wrap}
.sg-s222{}
.sg-s224{}
.sg-s230{flex-wrap:wrap}
.sg-s239{}
.sg-s241{flex-wrap:wrap}
.sg-s243{padding:35px 20px 53px}
.sg-s247{flex-wrap:wrap}
.sg-s249{display:flex;flex-direction:column}
.sg-s255{flex-wrap:wrap}
.sg-s260{flex-wrap:wrap}
.sg-s262{flex-wrap:wrap}
}

/* ---------- móvil estrecho ---------- */
@media (max-width: 430px){
.sg-s004{padding:0px 16px 0px}
.sg-s010{padding:26px 16px 36px}
.sg-s013{}
.sg-s019{zoom:0.72}
.sg-s036{padding:11px 16px 11px}
.sg-s039{padding:44px 16px 44px}
.sg-s043{}
.sg-s061{}
.sg-s079{}
.sg-s088{}
.sg-s095{}
.sg-s098{display:none}
.sg-s118{width:100%;max-width:384px}
.sg-s120{}
.sg-s121{padding:56px 16px 56px}
.sg-s124{display:none}
.sg-s127{}
.sg-s130{padding:36px 16px 20px}
.sg-s147{padding:32px 16px 44px}
.sg-s149{}
.sg-s151{zoom:0.72}
.sg-s159{padding:48px 16px 48px}
.sg-s166{}
.sg-s167{padding:48px 16px 48px}
.sg-s178{}
.sg-s186{padding:60px 16px 60px}
.sg-s189{}
.sg-s191{}
.sg-s192{zoom:0.74}
.sg-s207{}
.sg-s208{zoom:0.76}
.sg-s211{}
.sg-s213{}
.sg-s222{}
.sg-s224{}
.sg-s225{width:100%;max-width:380px;height:auto}
.sg-s236{width:100%;max-width:460px;height:auto}
.sg-s239{}
.sg-s241{width:100%;max-width:384px}
.sg-s243{padding:32px 16px 48px}
.sg-s248{width:100%;max-width:540px}
}

/* Portada: «Todo ya está a bordo» ------------------------------------------ */
.sg-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch;padding:0 0 0 120px;min-height:640px}
.sg-hero-texto{grid-column:1 / span 7;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:64px 0 80px}
.sg-hero-titulo{margin:0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(46px,6.6vw,96px);line-height:.98;letter-spacing:-.035em;color:#F4F6F8}
.sg-hero-entrada{margin:0;max-width:34em;font-size: var(--t-lead);line-height:1.6;color:#E3E5EA}
.sg-hero-foto{grid-column:8 / -1;margin:0;display:flex;flex-direction:column;gap:14px;padding:40px 0 32px}
.sg-hero-marco{position:relative;flex:1;min-height:520px;overflow:hidden;background:#0C1124}
.sg-hero-marco img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:42% 48%}
.sg-hero-pie{margin:0;max-width:30em;padding-right:24px;font-size: var(--t-small);line-height:1.5;color:#B6B9C2}
@media (prefers-reduced-motion: no-preference){
  .sg-hero-marco img{animation:sg-deriva 24s ease-in-out infinite alternate}
}
@keyframes sg-deriva{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1%,-1%)}}
.sg-houston-col{grid-column:7 / -1}
.sg-houston{margin:0;width:100%;display:flex;flex-direction:column;gap:12px}
.sg-houston img{display:block;width:100%;height:auto}
.sg-houston-pie{margin:0;font-size: var(--t-small);line-height:1.5;color:#565C64}
@media (max-width: 1280px){
  .sg-hero{padding-left:56px}
}
@media (max-width: 980px){
  .sg-hero{display:flex;flex-direction:column;gap:0;padding:0;min-height:0}
  .sg-hero-texto{padding:40px 40px 48px;gap:24px}
  .sg-hero-titulo{font-size:clamp(46px,10.5vw,96px)}
  .sg-hero-foto{padding:0 0 32px}
  .sg-hero-marco{flex:none;aspect-ratio:4 / 3;min-height:0}
  .sg-hero-pie{padding:0 40px}
}
@media (max-width: 680px){
  .sg-hero-texto{padding:32px 20px 40px}
  .sg-hero-titulo{font-size:clamp(44px,13vw,72px)}
  .sg-hero-entrada{}
  .sg-hero-marco{aspect-ratio:1 / 1}
  .sg-hero-pie{padding:0 20px}
}
@media (max-width: 430px){
  .sg-hero-texto{padding:28px 16px 36px}
  .sg-hero-pie{padding:0 16px}
}

/* Movimiento: entrada escalonada (la activa assets/js/space-genius.js) ------- */
.sg-anima .sg-entra{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.sg-anima .sg-entra.sg-visto{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .sg-anima .sg-entra{transform:none !important;transition:opacity 200ms ease !important}
}
/* respuesta de los enlaces con flecha */
.sg-s094 svg,.sg-s106 svg,.sg-btn svg{transition:transform 200ms var(--ease-out)}
@media (hover: hover) and (pointer: fine){
  .sg-btn:hover{transform:translateY(-1px)}
  .sg-s094:hover svg,.sg-s106:hover svg,.sg-btn:hover svg{transform:translateX(3px)}
}

/* Portada: secciones sin adornos de plantilla ------------------------------- */
@media (min-width: 1281px){
  .sg-s039{padding:128px 120px}
}
/* el problema: lista grande, sin cajas */
.sg-sintomas{margin:64px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:40px}
.sg-sintomas li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:baseline}
.sg-sintoma-titulo{grid-column:1 / span 5;margin:0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size: var(--t-h3);line-height:1.1;letter-spacing:-.02em;color:#F4F6F8}
.sg-sintoma-texto{grid-column:6 / span 6;margin:0;font-size: var(--t-lead);line-height:1.6;color:#E3E5EA}
/* el hueco entre las dos cifras del INE, sin trazo discontinuo ni brillo */
.sg-s078{top:0;height:16px;border:0;box-shadow:none;border-radius:0 999px 999px 0;background:rgba(238,127,175,.45)}
/* «Le falta la pantalla»: la frase y el cuadro de mando que la responde */
.sg-pantalla{margin-top:96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.sg-pantalla .sg-s079{grid-column:1 / span 5;margin:0}
.sg-cuadro{grid-column:7 / -1;box-sizing:border-box;padding:28px;border-radius:20px;background:#0E1428;display:flex;flex-direction:column;gap:18px}
.sg-cuadro .sg-s027{border:0;background:#161D36}
/* casillas del test: superficie por tono, sin contorno */
.sg-s049{border:0;background:#FFFFFF}
.sg-s047{border:0;box-shadow:none;background:#FBD3E5}
.sg-s088+.sg-s064{margin:-8px 0 0}
.sg-cuadro .sg-s025{font-size: var(--t-small);font-weight:500}
.sg-cuadro .sg-s028{font-size: var(--t-small)}
.sg-cuadro svg{width:100%;height:auto}
/* misiones: sin caja, para no repetir la forma de «dos puertas» */
.sg-mision{padding:0;background:none}
.sg-mision .sg-s109{margin:-10px 0 0;color:#EE7FAF}
/* el test: el titular necesita seis columnas para quedarse en dos líneas */
.sg-s041{grid-column:span 6}
/* páginas interiores: piezas nuevas */
.sg-banda{margin:56px 0 48px;display:flex;flex-direction:column;gap:12px}
.sg-banda img{display:block;width:100%;height:auto;aspect-ratio:21 / 9;object-fit:cover;object-position:50% 45%}
.sg-banda .sg-houston-pie{color:#B6B9C2}
.sg-blueprint .sg-banda .sg-houston-pie{color:#565C64}
.sg-banda-final{margin:80px 0 0}
.sg-contacto-foto{margin-top:40px}
.sg-contacto-parche{display:block;width:160px;height:auto;margin-top:8px}
.sg-s244 .sg-s014{max-width:34em}
.sg-s250,.sg-s257,.sg-s171,.sg-s173,.sg-s182{font-size:var(--t-body)}
.sg-s014{color:#D5D8DE}
@media (max-width: 980px){
  .sg-s210 .sg-s211{margin-top:40px}
  .sg-s210:first-child .sg-s211{margin-top:0}
}
.sg-etiqueta{font-weight:600;color:#C2185B}
.sg-s102+.sg-s227,.sg-s110+.sg-s109,.sg-s181+.sg-s232,.sg-s088+.sg-s064{margin-top:-8px}
.sg-s227{color:#C2185B}
.sg-s232{align-self:flex-start;height:auto;padding:4px 12px;border:0;background:rgba(194,24,91,.1)}
.sg-s152,.sg-s021{box-shadow:none;border:0}
@media (max-width: 680px){
  .sg-banda img{aspect-ratio:4 / 3}
}
/* «Estrategia y código, bajo el mismo techo»: la empresa, sin foto personal */
.sg-parche-bloque{display:block;width:100%;max-width:340px;height:auto}
.sg-blueprint .sg-s091{color:#3A4048;font-size:var(--t-body)}
.sg-cifra{margin:0;display:flex;flex-direction:column;gap:12px}
.sg-cifra-num{font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:clamp(96px,11vw,168px);line-height:.85;letter-spacing:-.05em;color:#C2185B}
.sg-cifra-texto{max-width:13em;font-size:var(--t-lead);line-height:1.4;color:#131F2C}
/* cierre */
.sg-s127{font-size:var(--t-h1);line-height:1;letter-spacing:-.03em}
@media (max-width: 980px){
  .sg-sintomas li,.sg-pantalla{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .sg-pantalla{gap:32px}
  .sg-sintoma-titulo{}
}
@media (max-width: 680px){
  .sg-sintomas{gap:32px;margin-top:48px}
  .sg-sintoma-titulo{}
  .sg-sintoma-texto{}
  .sg-s079,.sg-s083{}
  .sg-pantalla{margin-top:64px}
  .sg-cuadro{padding:20px}
  /* barras del INE: la etiqueta y la cifra arriba, la barra a todo el ancho debajo */
  .sg-page .sg-s072{display:grid;grid-template-columns:1fr auto;gap:8px 12px}
  .sg-page .sg-s073{width:auto}
  .sg-page .sg-s074{grid-column:1 / -1;grid-row:2}
  /* listas: el punto se queda junto a su texto */
  .sg-page .sg-s091{flex-wrap:nowrap}
}

/* Test de las cinco preguntas: un botón por pregunta que cambia de estado */
.sg-opcion{display:flex;align-items:center;gap:16px;width:100%;min-height:72px;box-sizing:border-box;padding:15px 20px;border:0;border-radius:14px;text-align:left;cursor:pointer;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:var(--t-body);line-height:1.45;color:#131F2C;background:#FFFFFF;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.sg-opcion:active{transform:scale(.98)}
.sg-opcion[aria-pressed="true"]{background:#FBD3E5}
@media (hover: hover) and (pointer: fine){
  .sg-opcion[aria-pressed="false"]:hover{background:#FDF2F7}
}
.sg-casilla{flex-shrink:0;width:26px;height:26px;box-sizing:border-box;border-radius:999px;border:2px solid #9AA0A8;display:flex;align-items:center;justify-content:center;color:#05070F;transition:background-color 150ms ease,border-color 150ms ease}
.sg-casilla svg{opacity:0;transform:scale(.6);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.sg-opcion[aria-pressed="true"] .sg-casilla{background:#EE7FAF;border-color:#EE7FAF}
.sg-opcion[aria-pressed="true"] .sg-casilla svg{opacity:1;transform:scale(1)}
/* el resultado aparece subiendo; la cifra llega 60 ms después */
.sg-s051 .sg-s052,.sg-s051 .sg-s055{transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.sg-s051 .sg-s056{transition:opacity 280ms var(--ease-out) 60ms,transform 280ms var(--ease-out) 60ms}
@media (prefers-reduced-motion: no-preference){
  @starting-style{.sg-s051 .sg-s052,.sg-s051 .sg-s055,.sg-s051 .sg-s056{opacity:0;transform:translateY(8px)}}
}
/* cinco de cinco: las casillas hacen «pop» una tras otra */
@keyframes sg-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.sg-pleno .sg-opcion .sg-casilla{animation:sg-pop 260ms var(--ease-out) both}
.sg-pleno .sg-opcion:nth-of-type(2) .sg-casilla{animation-delay:50ms}
.sg-pleno .sg-opcion:nth-of-type(3) .sg-casilla{animation-delay:100ms}
.sg-pleno .sg-opcion:nth-of-type(4) .sg-casilla{animation-delay:150ms}
.sg-pleno .sg-opcion:nth-of-type(5) .sg-casilla{animation-delay:200ms}
@media (prefers-reduced-motion: reduce){
  .sg-opcion:active,.sg-casilla svg{transform:none}
  .sg-casilla svg{transition:opacity 150ms ease}
  .sg-pleno .sg-opcion .sg-casilla{animation:none}
  @starting-style{.sg-s051 .sg-s052,.sg-s051 .sg-s055,.sg-s051 .sg-s056{opacity:0}}
}
/* Cuadro de mando: las barras crecen y el cliente en pérdidas aparece el último */
.sg-grafico rect{transform-box:fill-box;transform-origin:50% 100%}
.sg-grafico .sg-negativo{transform-origin:50% 0}
@media (prefers-reduced-motion: no-preference){
  .sg-anima [data-revelar] .sg-grafico rect{transform:scaleY(0);transition:transform 600ms var(--ease-out) 200ms}
  .sg-anima [data-revelar] .sg-grafico rect:nth-of-type(2){transition-delay:250ms}
  .sg-anima [data-revelar] .sg-grafico rect:nth-of-type(3){transition-delay:300ms}
  .sg-anima [data-revelar] .sg-grafico rect:nth-of-type(4){transition-delay:350ms}
  .sg-anima [data-revelar] .sg-grafico rect:nth-of-type(6){transition-delay:400ms}
  .sg-anima [data-revelar] .sg-grafico .sg-negativo{transition-delay:500ms}
  .sg-anima .sg-revelado .sg-grafico rect{transform:scaleY(1)}
}
.sg-anima [data-revelar] .sg-etiqueta-negativa{opacity:0;transition:opacity 200ms var(--ease-out) 1000ms}
.sg-anima .sg-revelado .sg-etiqueta-negativa{opacity:1}

/* Barras del INE: se llenan y después se ilumina el hueco */
@media (prefers-reduced-motion: no-preference){
  .sg-anima [data-revelar] .sg-s075,.sg-anima [data-revelar] .sg-s077{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--ease-out)}
  .sg-anima [data-revelar] .sg-s077{transition-delay:120ms}
  .sg-anima .sg-revelado .sg-s075,.sg-anima .sg-revelado .sg-s077{clip-path:inset(0 0 0 0)}
}
.sg-anima [data-revelar] .sg-s078{opacity:0;transition:opacity 200ms var(--ease-out) 820ms}
.sg-anima .sg-revelado .sg-s078{opacity:1}
/* Primera impresión de la portada: el titular sube línea a línea y la foto se asienta */
.sg-linea{display:block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.sg-linea>span{display:block}
@keyframes sg-linea-sube{from{transform:translateY(105%)}to{transform:none}}
@keyframes sg-foto-asienta{from{scale:1.08}to{scale:1}}
@keyframes sg-fundido{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .sg-intro .sg-linea>span{animation:sg-linea-sube 800ms var(--ease-out) both}
  .sg-intro .sg-linea+.sg-linea>span{animation-delay:90ms}
  .sg-intro .sg-hero-marco{animation:sg-fundido 600ms var(--ease-out) 150ms both}
  .sg-intro .sg-hero-marco img{animation:sg-foto-asienta 1000ms var(--ease-out) 150ms both,sg-deriva 24s ease-in-out 1150ms infinite alternate}
  .sg-intro .sg-hero-pie{animation:sg-fundido 400ms var(--ease-out) 700ms both}
}
@media (prefers-reduced-motion: reduce){
  .sg-intro .sg-hero-titulo,.sg-intro .sg-hero-marco{animation:sg-fundido 200ms ease both}
}

/* Transición al cambiar de página: la cabecera se queda y el contenido se funde */
@view-transition{navigation:auto}
.sg-s004{view-transition-name:cabecera}
@keyframes sg-vt-sale{to{opacity:0}}
@keyframes sg-vt-entra{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:sg-vt-sale 180ms var(--ease-out) both}
  ::view-transition-new(root){animation:sg-vt-entra 280ms var(--ease-out) both}
  ::view-transition-old(cabecera),::view-transition-new(cabecera){animation-duration:150ms}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}
/* Formulario de contacto: trampa para robots, avisos y estado «enviada» */
.sg-trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.sg-form-estado{margin:0;min-height:1.5em;font-size:var(--t-small);line-height:1.5;color:#3A4048;transition:opacity 200ms ease}
.sg-form-estado:empty{opacity:0}
.sg-error .sg-form-estado{color:#C2185B;font-weight:600}
.sg-s259:disabled{cursor:default}
.sg-enviado .sg-s259{background:#131F2C;color:#F4F6F8;transition:background-color 200ms ease,color 200ms ease}
.sg-enviado .sg-form-estado{color:#131F2C;font-weight:600}
.sg-agenda-boton{align-self:flex-start;margin-top:8px}
/* Ciclo IDEA: la trayectoria de retorno libre del Apolo 13 ------------------- */
.sg-idea-orbita{margin:40px 0 0;display:flex;flex-direction:column;gap:16px}
.sg-idea-orbita svg{display:block;width:100%;height:auto}
.sg-idea-orbita .sg-idea-v{display:none}
.sg-idea-orbita .sg-houston-pie{max-width:62em;font-size:var(--t-small);line-height:1.55;color:#565C64}
@media (max-width: 680px){
  .sg-idea-orbita .sg-idea-h{display:none}
  .sg-idea-orbita .sg-idea-v{display:block;max-width:400px;margin:0 auto}
}
@media (prefers-reduced-motion: reduce){
  .sg-idea-nave,.sg-idea-estela{display:none}
}
.sg-pleno .sg-opcion:nth-of-type(6) .sg-casilla{animation-delay:250ms}

/* Expedientes: una ficha por pantalla, con flechas -------------------------- */
.sg-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sg-expedientes{position:relative;margin-top:56px}
.sg-exp-pista{display:flex;gap:40px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;border-radius:18px}
.sg-exp-listo .sg-exp-pista{scrollbar-width:none;transition:height 350ms var(--ease-out)}
.sg-exp-listo .sg-exp-pista::-webkit-scrollbar{display:none}
.sg-exp-pista:focus-visible{outline:2px solid #EE7FAF;outline-offset:4px}
.sg-expediente{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:start;position:relative;margin-top:22px;padding:44px 48px 36px;border-radius:0 18px 18px 18px;background:#E7DCC2;color:#131F2C}
/* la pestaña de la carpeta */
.sg-expediente::before{content:"";position:absolute;left:0;top:-22px;width:220px;height:23px;border-radius:12px 12px 0 0;background:#E7DCC2}


.sg-exp-sello{position:absolute;right:48px;top:30px;margin:0;padding:6px 18px 4px;border:4px solid currentColor;border-radius:8px;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:700;font-size:var(--t-h3);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#B0124F;opacity:.86;transform:rotate(-7deg);mix-blend-mode:multiply;pointer-events:none}
.sg-exp-cuerpo{margin-top:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 40px;align-items:start}
.sg-exp-ficha{display:contents}
.sg-exp-titulo{grid-column:1 / span 9;margin:0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em;color:#131F2C}
.sg-exp-pregunta{grid-column:1 / span 9;margin:-16px 0 0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-size:var(--t-lead);font-weight:500;font-style:italic;color:#9E1048}
.sg-exp-datos{grid-column:1 / span 3;margin:0;display:flex;flex-direction:column;gap:14px}
.sg-exp-datos dt{font-size:var(--t-small);font-weight:600;color:#9E1048}
.sg-exp-datos dd{margin:2px 0 0;font-size:var(--t-small);line-height:1.45;color:#1E2A38}
.sg-censura{display:inline-block;width:9.5em;height:1.15em;margin-top:2px;border-radius:2px;background:#131F2C;vertical-align:middle;transform-origin:0 50%}
.sg-exp-relato{grid-column:4 / span 5;display:flex;flex-direction:column;gap:20px}
.sg-exp-rotulo{margin:0 0 6px;font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:var(--t-small);font-weight:600;color:#9E1048}
.sg-exp-bloque p{margin:0;font-size:var(--t-body);line-height:1.6;color:#1E2A38}
.sg-exp-resultado{grid-column:9 / span 4;display:flex;flex-direction:column;gap:18px}
.sg-exp-impacto ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.sg-exp-impacto li{display:flex;flex-direction:column;gap:2px}
.sg-exp-que{font-size:var(--t-small);font-weight:600;color:#5A4A2C}
.sg-exp-antes{font-size:var(--t-small);line-height:1.4;color:#5E5442;text-decoration:line-through;text-decoration-color:rgba(158,16,72,.7);text-decoration-thickness:2px}
.sg-exp-ahora{font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-size:20px;font-weight:600;line-height:1.25;color:#131F2C}
.sg-exp-decision{margin:0;font-size:var(--t-small);line-height:1.55;color:#1E2A38}
.sg-exp-decision strong{color:#9E1048}
.sg-exp-siguiente{margin:28px 0 0;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;border-radius:12px;background:#DACDAE;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-size:var(--t-lead);font-weight:500;color:#131F2C}
.sg-exp-siguiente .sg-s106{color:#9E1048}
.sg-exp-mandos{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:24px}
.sg-exp-contador{margin:0;min-width:5em;text-align:center;font-size:var(--t-small);font-weight:600;color:#B6B9C2}
.sg-exp-flecha{display:none;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:999px;background:#EE7FAF;color:#0B1426;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.sg-exp-listo .sg-exp-flecha{display:inline-flex}
.sg-exp-flecha:active{transform:scale(.94)}
@media (hover: hover) and (pointer: fine){
  .sg-exp-flecha:hover{background:#F7A8CB}
  .sg-exp-ant:hover svg{transform:translateX(-3px)}
  .sg-exp-sig:hover svg{transform:translateX(3px)}
}
.sg-exp-flecha svg{transition:transform 200ms var(--ease-out)}
.sg-exp-nota{margin:12px 0 0;text-align:center;font-size:var(--t-small);color:#A9ABAE}
.sg-blueprint .sg-exp-contador,.sg-blueprint .sg-exp-nota{color:#565C64}
.sg-blueprint .sg-exp-flecha{background:#131F2C;color:#F4F6F8}
@media (hover: hover) and (pointer: fine){ .sg-blueprint .sg-exp-flecha:hover{background:#C2185B} }
/* en pantallas anchas, las flechas a cada lado de la ficha */
@media (min-width: 1281px){
  .sg-exp-listo .sg-exp-flecha{position:absolute;top:220px}
  .sg-exp-ant{left:-88px}
  .sg-exp-sig{right:-88px}
}
/* el sello golpea y el nombre se tacha cada vez que se abre un expediente */
@keyframes sg-sello{0%{opacity:0;transform:rotate(-7deg) scale(1.8)}60%{opacity:.9;transform:rotate(-7deg) scale(.96)}100%{opacity:.86;transform:rotate(-7deg) scale(1)}}
@keyframes sg-tacha{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  .sg-exp-listo .sg-exp-actual.sg-visto .sg-exp-sello{animation:sg-sello 420ms var(--ease-out) 150ms both}
  .sg-exp-listo .sg-exp-actual.sg-visto .sg-censura{animation:sg-tacha 500ms var(--ease-out) 500ms both}
}
@media (prefers-reduced-motion: reduce){
  .sg-exp-listo .sg-exp-pista{transition:none}
  .sg-exp-flecha:active,.sg-exp-flecha svg{transform:none !important}
}
@media (max-width: 1100px){
  .sg-exp-titulo,.sg-exp-pregunta{grid-column:1 / -1;padding-right:0}
  .sg-exp-titulo{padding-top:52px}
  .sg-exp-datos{grid-column:1 / span 5}
  .sg-exp-relato{grid-column:6 / span 7}
  .sg-exp-resultado{grid-column:1 / -1}
  .sg-exp-impacto ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 680px){
  .sg-expediente{padding:28px 20px 24px}
  .sg-expediente::before{width:140px}
  .sg-exp-sello{right:20px;top:20px;padding:5px 12px 3px;border-width:3px}

  .sg-exp-titulo{padding-top:44px}
  .sg-exp-cuerpo{display:flex;flex-direction:column;gap:24px}
  .sg-exp-pregunta{margin-top:-12px}
  .sg-exp-impacto ul{display:flex}
  .sg-exp-siguiente{padding:14px 16px}
  .sg-exp-mandos{gap:16px}
}
/* el ciclo IDEA sobre fondo de estrellas (Consultoría) */
.sg-space .sg-idea-orbita .sg-houston-pie{color:#B6B9C2}
/* cabecera: el parche del cerebro, a la derecha del nombre */
.sg-s005{gap:12px}
.sg-cabecera-parche{display:block;width:61px;height:56px;flex-shrink:0}
@media (max-width: 680px){ .sg-cabecera-parche{width:48px;height:44px} }

/* Páginas legales: índice a la izquierda, texto a la derecha ------------------ */
.sg-legal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.sg-legal-indice{grid-column:1 / span 3;position:sticky;top:32px;min-width:0}
.sg-legal-indice-titulo{margin:0 0 14px;font-size:var(--t-small);font-weight:600;color:#C2185B}
.sg-legal-indice ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.sg-legal-indice a{font-size:var(--t-small);line-height:1.4;color:#3A4048}
.sg-legal-indice a:hover{color:#C2185B}
.sg-legal-texto{grid-column:5 / span 8;min-width:0}
.sg-legal-texto>p,.sg-legal-texto>ul,.sg-legal-texto>dl,.sg-legal-texto>h2{max-width:44em}
.sg-legal-texto h2{margin:64px 0 16px;scroll-margin-top:24px;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em;color:#131F2C}
.sg-legal-texto h2:first-child{margin-top:0}
.sg-legal-texto p,.sg-legal-texto li,.sg-legal-texto dd{font-size:var(--t-body);line-height:1.65;color:#1E2A38}
.sg-legal-texto p+p,.sg-legal-texto ul+p,.sg-legal-texto p+ul,.sg-legal-texto dl+p,.sg-legal-texto p+dl{margin-top:16px}
.sg-legal-texto ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sg-legal-texto li{position:relative;padding-left:20px}
.sg-legal-texto li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:999px;background:#C2185B}
.sg-legal-texto strong{font-weight:600;color:#131F2C}
.sg-legal-texto a,.sg-form-info a{color:#C2185B;text-decoration:underline;text-underline-offset:2px}
.sg-legal-datos{margin:0;display:flex;flex-direction:column;gap:12px}
.sg-legal-datos div{display:grid;grid-template-columns:12em 1fr;gap:16px}
.sg-legal-datos dt{font-size:var(--t-body);font-weight:600;color:#131F2C}
.sg-legal-datos dd{margin:0}
.sg-legal-tabla-caja{overflow-x:auto;margin:0 0 16px}
.sg-legal-tabla{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--t-small);line-height:1.5;color:#1E2A38;background:#FFFFFF;border-radius:12px;overflow:hidden}
.sg-legal-tabla th{padding:12px 14px;text-align:left;font-weight:600;color:#131F2C;background:#E9E7E1}
.sg-legal-tabla td{padding:12px 14px;vertical-align:top;border-top:1px solid #E9E7E1}
.sg-legal-tabla td:first-child{font-weight:600;white-space:nowrap}
.sg-legal-fecha{margin-top:56px !important;font-size:var(--t-small) !important;color:#565C64 !important}
.sg-pendiente{padding:1px 6px;border-radius:4px;background:#FBD3E5;color:#8A1240;font-weight:600}
/* el recuadro de la cabecera: datos del titular, resumen o elección actual */
.sg-legal-resumen{box-sizing:border-box;width:100%;max-width:520px;margin-left:auto;padding:32px;border-radius:20px;background:#0E1428;display:flex;flex-direction:column;gap:16px}
.sg-legal-resumen-titulo{margin:0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:var(--t-h3);color:#F4F6F8}
.sg-legal-resumen dl{margin:0;display:flex;flex-direction:column;gap:12px}
.sg-legal-resumen dt{font-size:var(--t-small);font-weight:600;color:#EE7FAF}
.sg-legal-resumen dd{margin:2px 0 0;font-size:var(--t-body);line-height:1.5;color:#E3E5EA}
.sg-legal-resumen ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.sg-legal-resumen li{position:relative;padding-left:20px;font-size:var(--t-body);line-height:1.5;color:#E3E5EA}
.sg-legal-resumen li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:999px;background:#EE7FAF}
.sg-legal-resumen a{color:#EE7FAF}
.sg-legal-estado{margin:0;font-size:var(--t-lead);line-height:1.5;color:#E3E5EA}
.sg-legal-resumen .sg-btn{align-self:flex-start;border:0;cursor:pointer}
@media (max-width: 980px){
  .sg-legal{display:flex;flex-direction:column;gap:40px}
  .sg-legal>*{min-width:0;max-width:100%}
  .sg-legal-resumen{margin-left:0}
  .sg-legal-indice{position:static}
  .sg-legal-indice ol{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
}
@media (max-width: 680px){
  .sg-legal-datos div{grid-template-columns:1fr;gap:2px}
  .sg-legal-resumen{padding:24px}
  /* la tabla de cookies, en fichas apiladas */
  .sg-legal-tabla{min-width:0;background:none}
  .sg-legal-tabla thead{display:none}
  .sg-legal-tabla tr{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:16px;border-radius:12px;background:#FFFFFF}
  .sg-legal-tabla td{padding:0;border:0;white-space:normal !important}
  .sg-legal-tabla td:nth-child(2)::before{content:"De quién: ";font-weight:600}
  .sg-legal-tabla td:nth-child(3)::before{content:"Para qué: ";font-weight:600}
  .sg-legal-tabla td:nth-child(4)::before{content:"Duración: ";font-weight:600}
  .sg-legal-tabla td:nth-child(5)::before{content:"Tipo: ";font-weight:600}
}
/* pie: «Configurar cookies» es un botón con aspecto de enlace */
.sg-boton-enlace{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.sg-boton-enlace:hover{color:#FFFFFF}
.sg-s145[aria-current="page"]{color:#FFFFFF}
/* formulario: información básica de protección de datos */
.sg-form-info{margin:0;font-size:var(--t-small);line-height:1.55;color:#3A4048}

/* Aviso de cookies: abajo a la izquierda, sin bloquear la página -------------- */
.sg-cookies{position:fixed;left:24px;bottom:24px;z-index:1000;box-sizing:border-box;width:min(440px,calc(100vw - 48px));padding:20px;border-radius:20px;background:#0E1428;color:#E3E5EA;box-shadow:0 16px 48px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;font-family:'IBM Plex Sans',system-ui,sans-serif}
.sg-cookies[hidden]{display:none}
.sg-cookies-titulo{margin:0;font-family:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:var(--t-h3);line-height:1.2;color:#F4F6F8}
.sg-cookies-texto{margin:0;font-size:var(--t-small);line-height:1.55}
.sg-cookies-texto a{color:#EE7FAF;text-decoration:underline;text-underline-offset:2px}
.sg-cookies-opciones{display:flex;flex-direction:column;gap:10px}
.sg-cookies-opciones[hidden]{display:none}
.sg-cookies-opcion{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#161D36;font-size:var(--t-small);line-height:1.5;cursor:pointer}
.sg-cookies-opcion strong{display:block;font-size:var(--t-body);color:#F4F6F8}
.sg-cookies-opcion input{margin:3px 0 0;width:20px;height:20px;flex-shrink:0;accent-color:#EE7FAF}
.sg-cookies-botones{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sg-cookies-boton{min-height:46px;padding:0 24px;border:0;border-radius:999px;background:#EE7FAF;color:#0B1426;font:inherit;font-size:var(--t-small);font-weight:600;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.sg-cookies-boton:active{transform:scale(.97)}
.sg-cookies-elegir{min-height:46px;padding:0 12px;border:0;background:none;color:#F4F6F8;font:inherit;font-size:var(--t-small);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sg-cookies-botones [data-cookies="aceptar"]{margin-left:auto}
@media (hover: hover) and (pointer: fine){
  .sg-cookies-boton:hover{background:#F7A8CB}
  .sg-cookies-elegir:hover{color:#EE7FAF}
}
@media (prefers-reduced-motion: no-preference){
  @keyframes sg-cookies-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .sg-cookies{animation:sg-cookies-entra 320ms var(--ease-out) 400ms both}
}
@media (max-width: 680px){
  /* móvil: aviso compacto, los tres botones en una fila; con las opciones abiertas, «Guardar mi elección» va debajo */
  .sg-cookies{left:12px;right:12px;bottom:12px;width:auto;padding:16px;gap:10px}
  .sg-cookies-titulo{font-size:var(--t-body)}
  .sg-cookies-botones{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .sg-cookies-boton{min-height:44px;padding:0 12px}
  .sg-cookies-elegir{min-height:44px;padding:0 10px}
  .sg-cookies:has(.sg-cookies-opciones:not([hidden])) .sg-cookies-botones{grid-template-columns:1fr 1fr}
  .sg-cookies:has(.sg-cookies-opciones:not([hidden])) .sg-cookies-elegir{grid-column:1 / -1;grid-row:2}
  .sg-cookies-botones [data-cookies="aceptar"]{margin-left:0}
}

/* Antetítulo: la línea pequeña dentro del h1 que dice, sin metáfora, qué hacemos */
.sg-antetitulo{display:block;margin:0 0 16px;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:600;font-size:var(--t-small);line-height:1.4;letter-spacing:0;text-transform:none;color:#EE7FAF}

/* Reservar flotante (móvil y tableta): centrado con márgenes, no con transform, porque .sg-btn usa transform al pulsar */
.sg-reservar-flotante{display:none}
@media (max-width: 980px){
  .sg-reservar-flotante{display:inline-flex;position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:900;width:max-content;margin:0 auto;text-decoration:none;height:52px;padding:0 28px;box-shadow:0 12px 32px rgba(0,0,0,.45);opacity:0;visibility:hidden;translate:0 16px;transition:opacity 200ms ease,translate 240ms var(--ease-out),visibility 0s linear 240ms}
  .sg-reservar-flotante.sg-visible{opacity:1;visibility:visible;translate:0 0;transition:opacity 200ms ease,translate 240ms var(--ease-out),visibility 0s}
  body:has(.sg-cookies:not([hidden])) .sg-reservar-flotante{display:none}
}
@media (prefers-reduced-motion: reduce){
  .sg-reservar-flotante,.sg-reservar-flotante.sg-visible{translate:none;transition:none}
}

/* Ligera: las secciones fuera de pantalla no mueven nada (space-genius.js les pone .sg-quieta y se la quita al llegar) */
.sg-quieta,.sg-quieta *,.sg-quieta::before,.sg-quieta::after,.sg-quieta *::before,.sg-quieta *::after{animation-play-state:paused !important}
/* y el navegador no prepara las secciones de abajo hasta que se acercan; las del carrusel de expedientes, sí,
   porque el carrusel mide la altura de la primera ficha al cargar */
.sg-page > section:not(:first-child):not(:has([data-expedientes])),.sg-page > footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Página de un expediente: sin carrusel, las flechas son enlaces al anterior y al siguiente */
.sg-exp-solo .sg-exp-flecha{display:inline-flex}
.sg-exp-volver{color:#EE7FAF}