/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero { min-height: 100svh; display: grid; grid-template-rows: auto auto 1fr auto; padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(24px, 3vw, 40px); width: min(100%, var(--container) + var(--gutter) * 2); margin-inline: auto; }
.hero__top { display: flex; justify-content: space-between; align-items: center; }
.hero__logo { height: clamp(30px, 3vw, 44px); }
.hero__logo .logo-svg { height: 100%; width: auto; }
.hero__head { display: grid; grid-template-columns: 8fr 4fr; gap: var(--gap-lg); align-items: end; margin: clamp(48px, 9vh, 120px) 0 clamp(32px, 5vh, 64px); }
.hero__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.035em; max-width: 9.5em; }
.hero__sub { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--ink-soft); max-width: 22em; padding-bottom: 0.4em; }
.hero__visual { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 21 / 9; background: var(--brand-accent); min-height: 320px; }
.hero__visual-inner { width: 100%; height: 100%; transform-origin: center; }
.hero__visual .asset__media { object-fit: contain; padding-top: 3%; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--rule); }
.hero__scroll { display: flex; align-items: center; gap: 12px; }
.hero__scroll-line { width: 48px; height: 1px; background: var(--ink); transform-origin: left; animation: scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 900px) { .hero__head { grid-template-columns: 1fr; } .hero__sub { padding-bottom: 0; } }
@media (max-width: 760px) { .hero__visual { aspect-ratio: 4 / 5; min-height: 0; } .hero__scroll { display: none; } }

/* ═══════════════════════════ TEXT SECTION ═══════════════════════════ */
.text-section { padding: var(--section) 0 var(--block); }
.text-section__statement { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-statement); line-height: 1.18; letter-spacing: -0.02em; max-width: 24em; }
.text-section__body { margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-soft); max-width: 34em; }
.text-section__cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-lg); margin-top: var(--block); }
.text-section__col { grid-column: span 4; }
.text-section__col:first-child { grid-column: 5 / span 4; }
.text-section__col:nth-child(2) { grid-column: 9 / span 4; }
.text-section__col-title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 18px; font-weight: 500; }
.text-section__col p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
@media (max-width: 900px) { .text-section__col, .text-section__col:first-child, .text-section__col:nth-child(2) { grid-column: 1 / -1; } }

/* ═══════════════════════════ STORY (Mail · reto · respuesta · evolución) ═══════════════════════════ */
.story { padding: var(--section) 0 0; }
.story__start { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-lg); align-items: center; }
.story__statement { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.025em; max-width: 9em; }
.story__body { margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-soft); max-width: 26em; }
.story__start-visual { position: relative; }
.story__start-stage { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 6% 10%; }
.story__mail { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 40px 60px rgba(1, 102, 253, 0.18)); }
.story__start-icon { position: absolute; right: 4%; bottom: 14%; width: clamp(56px, 7vw, 104px); border-radius: 22%; overflow: hidden; box-shadow: 0 20px 40px -12px rgba(0,20,42,0.35); }
.story__start-icon .img { display: block; }
.story--challenge { padding-top: var(--block); padding-bottom: var(--block); }
.story__cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap-lg); }
.story__col { grid-column: span 4; }
.story__col:first-child { grid-column: 3 / span 4; }
.story__col:nth-child(2) { grid-column: 8 / span 4; }
.story__col-title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: 18px; font-weight: 500; }
.story__col p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.story__timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--section); padding-top: clamp(40px, 5vw, 72px); }
.story__line { position: absolute; left: 12.5%; right: 12.5%; top: 0; height: 1px; background: var(--rule); }
.story__line::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(90deg, var(--brand-accent) 0 25%, var(--rule) 25%); }
.story__step { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.story__step::before { content: ''; position: absolute; top: calc(clamp(40px, 5vw, 72px) * -1 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); }
.story__step:not(:first-child)::before { background: var(--paper); border: 1px solid var(--ink-faint); }
.story__step-art { width: 62%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 6px; }
.story__step-art .img { width: 100%; height: auto; }
.story__step strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.story__step:not(:first-child) .story__step-art { opacity: 0.92; }
.story__step--defender .story__step-art { opacity: 0.8; }
@media (max-width: 900px) { .story__start { grid-template-columns: 1fr; } .story__col, .story__col:first-child, .story__col:nth-child(2) { grid-column: 1 / -1; } .story__timeline { grid-template-columns: 1fr 1fr; row-gap: var(--gap-lg); } .story__line { display: none; } .story__step::before { display: none; } }

/* ═══════════════════════════ FULL BLEED ═══════════════════════════ */
.fullbleed { position: relative; width: 100%; overflow: hidden; }
.fullbleed--inset { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; border-radius: var(--r-tile); }
.fullbleed--inset .fullbleed__media { border-radius: var(--r-tile); }
.fullbleed__media { position: relative; width: 100%; aspect-ratio: inherit; overflow: hidden; }
.fullbleed.ratio-16-9 .fullbleed__media { aspect-ratio: 16 / 9; } .fullbleed.ratio-21-9 .fullbleed__media { aspect-ratio: 21 / 9; } .fullbleed.ratio-4-3 .fullbleed__media { aspect-ratio: 4 / 3; }
.fullbleed__media[data-parallax] .asset { height: 118%; top: -9%; }
.fullbleed .caption { padding-bottom: var(--block); }
@media (max-width: 760px) { .fullbleed.ratio-21-9 .fullbleed__media { aspect-ratio: 4 / 3; } .fullbleed.ratio-16-9 .fullbleed__media { aspect-ratio: 4 / 5; } }

/* ═══════════════════════════ STAGE (fondo abstracto + capas flotantes) ═══════════════════════════ */
.stage { position: relative; width: 100%; margin: var(--block) 0; }
.stage--inset { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.stage__frame { position: relative; overflow: hidden; border-radius: var(--r-tile); background: #fff; }
.stage__bg { position: absolute; inset: -6% 0; }
.stage__bg .asset { height: 100%; }
.stage__layer { position: absolute; z-index: 2; }
.stage__layer-inner .img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(1, 102, 253, 0.16)); }
.stage .caption { padding-top: 0; }
.stage--inset .caption { padding-left: 0; }
.universe { margin: var(--section) auto; }
@media (max-width: 760px) { .stage__frame { aspect-ratio: 4 / 5 !important; } .stage__layer-inner .img { filter: none; } }

/* ═══════════════════════════ IMAGE GRID ═══════════════════════════ */
.igrid { display: grid; gap: var(--gap); margin-bottom: var(--block); }
.igrid--gap-lg { gap: var(--gap-lg); }
.igrid__item { min-width: 0; }
.igrid__media { border-radius: var(--r-media); overflow: hidden; background: var(--paper-2); }
.igrid--pair { grid-template-columns: 1fr 1fr; } .igrid--pair .igrid__media { aspect-ratio: 4 / 5; }
.igrid--pair-wide { grid-template-columns: 1fr 1fr; } .igrid--pair-wide .igrid__media { aspect-ratio: 16 / 10; }
.igrid--triple { grid-template-columns: repeat(3, 1fr); } .igrid--triple .igrid__media { aspect-ratio: 1; }
.igrid--feature { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.igrid--feature .igrid__item:first-child { grid-row: 1 / 3; } .igrid--feature .igrid__item:first-child .igrid__media { aspect-ratio: 4 / 5; height: 100%; }
.igrid--feature .igrid__item:not(:first-child) .igrid__media { aspect-ratio: 1; }
.igrid--offset { grid-template-columns: 1fr 1fr; align-items: start; } .igrid--offset .igrid__media { aspect-ratio: 4 / 5; }
.igrid--offset .igrid__item:nth-child(2) { margin-top: clamp(60px, 10vw, 180px); }
.igrid--half { grid-template-columns: 1fr 1fr; } .igrid--half .igrid__media { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
  .igrid--pair, .igrid--pair-wide, .igrid--offset, .igrid--half { grid-template-columns: 1fr; }
  .igrid--triple { grid-template-columns: 1fr 1fr; }
  .igrid--feature { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .igrid--feature .igrid__item:first-child { grid-column: 1 / -1; grid-row: auto; }
  .igrid--offset .igrid__item:nth-child(2) { margin-top: 0; }
}

/* ═══════════════════════════ IDENTIDAD — la sonrisa es la clave ═══════════════════════════ */
.logo-sc { padding: var(--section) 0 var(--block); }
.logo-sc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); width: min(100% - var(--gutter) * 2, var(--container)); margin: 0 auto var(--gap); }
.logo-sc__panel { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-tile); overflow: hidden; display: grid; place-items: center; padding: clamp(32px, 7vw, 120px); }
.logo-sc__panel--light { background: #fff; border: 1px solid var(--rule); }
.logo-sc__panel--blue { background: var(--brand-accent); color: #fff; }
.logo-sc__panel .label { position: absolute; top: 22px; left: 24px; }
.logo-sc__panel .asset { height: 100%; } .logo-sc__panel .ph { background: transparent; }
.logo-sc__panel .logo-sc__svg { width: 100%; max-width: 560px; height: auto; }
.logo-sc__trio { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--gap); }
.logo-sc__tile { position: relative; aspect-ratio: 1; border-radius: var(--r-tile); background: #fff; border: 1px solid var(--rule); display: grid; place-items: center; padding: clamp(24px, 5vw, 80px); overflow: hidden; }
.logo-sc__tile--blue { background: var(--brand-accent); border: 0; color: #fff; }
.logo-sc__tile--wide { aspect-ratio: 2 / 1; }
.logo-sc__tile--3d { background: radial-gradient(80% 90% at 50% 110%, #2f80ff 0%, var(--brand-accent) 55%, #0147c9 100%); border: 0; color: #fff; padding: clamp(24px, 4vw, 64px) clamp(32px, 10vw, 160px); }
.logo-sc__tile .label { position: absolute; top: 22px; left: 24px; }
.logo-sc__tile .ph { background: transparent; } .logo-sc__tile .asset { height: 100%; }
.logo-sc__bottom { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap-lg); margin-top: var(--block); align-items: start; }
.logo-sc__sizes { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(12px, 2vw, 32px); margin-top: 28px; padding: clamp(28px, 4vw, 56px); background: #fff; border: 1px solid var(--rule); border-radius: var(--r-tile); flex-wrap: wrap; }
.logo-sc__size { display: flex; flex-direction: column; align-items: center; gap: 12px; } .logo-sc__size .caption { white-space: nowrap; font-size: 11px; margin-top: 0; }
.logo-sc__size-box { display: grid; place-items: center; } .logo-sc__size-box svg { width: 100%; height: 100%; }
.logo-sc__principles { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.logo-sc__principles li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.logo-sc__principles strong { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.logo-sc__principles span { color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px) { .logo-sc__pair { grid-template-columns: 1fr; } .logo-sc__trio { grid-template-columns: 1fr 1fr; } .logo-sc__tile { padding: 22% 18% 14%; } .logo-sc__tile--wide { grid-column: 1 / -1; padding: clamp(40px, 10vw, 64px) clamp(32px, 12vw, 120px); } .logo-sc__bottom { grid-template-columns: 1fr; } }

/* ═══════════════════════════ SISTEMA VISUAL — azul · sonrisa · luz ═══════════════════════════ */
.vsys { padding: var(--section) 0 var(--block); }
.colorsys, .typo { margin-bottom: calc(var(--block) * 1.4); }
.colorsys__head, .typo__head, .mascot__block-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-lg); align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px); }
@media (max-width: 760px) { .colorsys__head, .typo__head, .mascot__block-head { grid-template-columns: 1fr; } }
.colorsys__strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: clamp(260px, 36vw, 520px); border-radius: var(--r-tile); overflow: hidden; }
.colorsys__cell { grid-column: span var(--span); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; min-width: 0; }
.colorsys__cell:first-child { padding: 28px; } .colorsys__cell:first-child .colorsys__name { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 44px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.colorsys__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .colorsys__hex { opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colorsys__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap-lg); margin-top: 20px; }
.colorsys__row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.colorsys__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.colorsys__role { color: var(--ink-faint); margin-left: auto; text-align: right; font-size: 13px; }
.colorsys__secondary { margin-top: clamp(32px, 4vw, 56px); }
.colorsys__chips { display: flex; gap: var(--gap); margin-top: 16px; flex-wrap: wrap; }
.colorsys__chip { flex: 1 1 180px; min-height: 120px; border-radius: var(--r-media); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 760px) { .colorsys__strip { grid-template-columns: repeat(2, 1fr); height: auto; } .colorsys__cell { grid-column: auto; aspect-ratio: 1; } .colorsys__cell:first-child { grid-column: 1 / -1; aspect-ratio: 2; } .colorsys__legend { grid-template-columns: 1fr; } }

.typo__poster { background: var(--dark); color: #fff; border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 21 / 10; position: relative; }
.typo__poster-inner { position: absolute; inset: 0; padding: clamp(28px, 4vw, 72px); display: flex; flex-direction: column; justify-content: space-between; }
.typo__poster-headline { font-size: clamp(40px, 7.4vw, 136px); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em; max-width: 7em; }
.typo__poster-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.typo__poster-figure { width: clamp(120px, 16vw, 280px); margin-bottom: calc(clamp(28px, 4vw, 72px) * -1 - 6px); margin-right: -2%; }
.typo__poster-figure .img { width: 100%; height: auto; }
.typo__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap); }
.typo__tile { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-tile); padding: clamp(20px, 2.4vw, 36px); min-height: 320px; display: flex; flex-direction: column; }
.typo__tile--alphabet { grid-column: 1 / -1; min-height: 0; }
.typo__tile-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 24px; } .typo__tile-top .caption { margin: 0; }
.typo__specimen { flex: 1; display: grid; align-content: center; }
.typo__big { font-size: clamp(64px, 7vw, 128px); line-height: 1; letter-spacing: -0.04em; }
.typo__para { font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; color: var(--ink); }
.typo__accent { font-size: clamp(22px, 2.2vw, 36px); letter-spacing: 0.02em; color: var(--brand-primary); }
.typo__weights { display: flex; gap: 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 22px; }
.typo__alphabet { font-size: clamp(22px, 2.6vw, 44px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; word-break: break-word; }
@media (max-width: 900px) { .typo__tiles { grid-template-columns: 1fr; } .typo__poster { aspect-ratio: 4 / 5; } .typo__poster-figure { display: none; } }

/* ═══════════════════════════ SISTEMA DE PRODUCTOS ═══════════════════════════ */
.psys { padding: var(--section) 0 0; }
.psys__stage { margin-top: 0; }
.psys__family-wrap { background: var(--dark); color: #fff; padding: calc(var(--block) * 1.3) 0; margin-top: var(--block); }
.psys__family { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-lg); }
.psys__family-item { display: grid; justify-items: center; gap: 18px; }
.psys__family-item .img { width: 70%; border-radius: 22%; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); }
.psys__family-wrap .caption { color: var(--on-dark-faint); margin-top: clamp(28px, 3vw, 48px); text-align: center; }
@media (max-width: 900px) { .psys__family { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════ SONRISA MODULAR ═══════════════════════════ */
.smile { padding: var(--section) 0 var(--block); }
.smile__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.smile__tile { position: relative; border-radius: var(--r-tile); overflow: hidden; min-width: 0; }
.smile__tile .label { position: absolute; left: 24px; bottom: 20px; z-index: 2; }
.smile__tile--big { grid-column: span 8; aspect-ratio: 2 / 1; background: radial-gradient(80% 90% at 50% 110%, #2f80ff 0%, var(--brand-accent) 55%, #0147c9 100%); }
.smile__big-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 10% 16%; }
.smile__big-img { width: 100%; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 20, 42, 0.3)); }
.smile__tile--pattern { grid-column: span 4; aspect-ratio: 1; background-color: var(--brand-accent); background-size: 24% auto; background-position: 0 0; background-repeat: repeat; }
.smile__tile--rhythm { grid-column: span 8; aspect-ratio: 2 / 1; background: var(--dark); }
.smile__rhythm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 8% 7%; gap: 2%; }
.smile__beat { display: block; width: calc(5% * var(--s)); flex: none; }
.smile__beat svg { width: 100%; height: auto; }
.smile__tile--states { grid-column: span 4; aspect-ratio: 1; background: #fff; border: 1px solid var(--rule); display: grid; align-content: center; gap: 14px; padding: 12%; }
.smile__states-img .img { width: 100%; height: auto; }
.smile__states-labels { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; } .smile__states-labels .caption { margin: 0; }
.smile__tile--texture { grid-column: span 8; aspect-ratio: 3 / 1; background-color: #fff; border: 1px solid var(--rule); background-size: 7% auto; background-repeat: repeat; background-position: 0 0; opacity: 1; }
.smile__tile--iso { grid-column: span 4; aspect-ratio: 1.5; background: var(--brand-accent); padding: 14%; }
.smile__tile--iso .asset { height: 100%; } .smile__tile--iso .ph { background: transparent; }
@media (max-width: 900px) { .smile__tile--big, .smile__tile--pattern, .smile__tile--rhythm, .smile__tile--states, .smile__tile--texture, .smile__tile--iso { grid-column: 1 / -1; } .smile__tile--big, .smile__tile--rhythm { aspect-ratio: 4 / 3; } .smile__tile--texture { aspect-ratio: 2 / 1; background-size: 12% auto; } .smile__tile--pattern { background-size: 25% auto; } }

/* ═══════════════════════════ LENGUAJE VISUAL (iconos · fondos · luz) ═══════════════════════════ */
.lang { padding: var(--section) 0 var(--block); }
.lang__stage { margin-top: 0; }
.lang__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--block); }
.lang__macro-stage { aspect-ratio: 4 / 5; border-radius: var(--r-tile); background: var(--brand-accent); overflow: hidden; display: grid; place-items: center; }
.lang__macro-img { width: 160%; max-width: none; height: auto; transform: translate(4%, 18%); }
.lang__loading { position: relative; }
.lang__loading-bg { aspect-ratio: 4 / 5; border-radius: var(--r-tile); overflow: hidden; }
.lang__loading-icon { position: absolute; left: 50%; top: 42%; width: 46%; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 50px rgba(1, 102, 253, 0.2)); }
.lang__loading-icon .img { width: 100%; height: auto; }
@media (max-width: 760px) { .lang__pair { grid-template-columns: 1fr; } }

/* ═══════════════════════════ PERSONAJE ═══════════════════════════ */
.mascot { padding: var(--section) 0 0; }
.mascot__hero { margin-bottom: var(--section); }
.mascot__hero-stage { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--r-tile); background: radial-gradient(90% 80% at 50% 100%, var(--brand-accent) 0%, #0a3fb0 45%, var(--dark) 100%); overflow: hidden; position: relative; display: grid; place-items: end center; }
.mascot__hero-figure { width: min(52%, 640px); transform-origin: bottom center; margin-bottom: -2%; }
.mascot__hero-figure .img { width: 100%; height: auto; }
.mascot__expr-wrap { background: #fff; color: var(--ink); padding: var(--section) 0 var(--section); }
.mascot__expr-wrap .body-lg { color: var(--ink-soft); } .mascot__expr-wrap .caption { color: var(--ink-faint); }
.mascot__expressions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.mascot__expression .asset { aspect-ratio: 1; border-radius: var(--r-media); background: var(--paper-2); height: auto; }
.mascot__expression--happy .asset { background: var(--state-happy); }
.mascot__expression--flat .asset { background: var(--state-flat); }
.mascot__expression--angry .asset { background: var(--state-angry); }
.mascot__expression .asset__media { padding: 10%; }
.mascot__poses { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-lg); padding-bottom: var(--section); align-items: start; }
.mascot__poses-sticky { position: sticky; top: 14vh; }
.mascot__steps { margin-top: 32px; display: grid; gap: 22px; border-top: 1px solid var(--rule-dark); padding-top: 28px; }
.mascot__steps li { display: grid; gap: 4px; } .mascot__steps li span { color: var(--on-dark-soft); font-size: 15px; }
.mascot__steps strong { font-family: var(--font-display); font-size: 20px; }
.mascot__poses-list { display: grid; gap: var(--gap-lg); }
.mascot__pose { width: 72%; } .mascot__pose--r { margin-left: auto; }
.mascot__pose-stage { aspect-ratio: 1; border-radius: var(--r-media); background: var(--dark-2); display: grid; place-items: center; padding: 8%; overflow: hidden; }
.mascot__pose:nth-child(2) .mascot__pose-stage { background: var(--brand-accent); }
.mascot__pose-stage .img { width: 100%; height: auto; }
@media (max-width: 900px) { .mascot__expressions { grid-template-columns: repeat(3, 1fr); } .mascot__poses { grid-template-columns: 1fr; } .mascot__poses-sticky { position: static; } .mascot__pose { width: 100%; } .mascot__hero-stage { aspect-ratio: 4 / 5; } .mascot__hero-figure { width: 86%; } }
@media (max-width: 600px) { .mascot__expressions { grid-template-columns: 1fr; } }

/* ═══════════════════════════ PAISAJES — calma ═══════════════════════════ */
.calm { padding: var(--section) 0 0; background: #fff; }
.calm .sh { margin-bottom: var(--block); }
.calm .fullbleed { margin-bottom: var(--block); }
.calm .asset__media { object-fit: cover; object-position: center; }
.calm .igrid { margin-bottom: 0; padding-bottom: var(--section); }

/* ═══════════════════════════ PIE ═══════════════════════════ */
.closing { padding: var(--block) 0 clamp(32px, 4vw, 64px); }
.closing__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-lg); align-items: center; }
.closing__brand { display: grid; gap: 20px; }
.closing__logo { height: 40px; } .closing__logo .logo-svg { height: 100%; width: auto; }
.closing__cta { display: inline-flex; align-items: center; gap: 12px; justify-self: end; padding: 16px 22px; border: 1px solid var(--rule-dark); border-radius: 999px; font-size: 14px; transition: background var(--dur-fast), color var(--dur-fast); }
.closing__cta:hover { background: #fff; color: var(--dark); }
.closing__arrow { transition: transform var(--dur-fast); } .closing__cta:hover .closing__arrow { transform: translateX(4px); }
@media (max-width: 900px) { .closing__foot { grid-template-columns: 1fr; } .closing__cta { justify-self: start; } }

.smile__tile--texture .label { background: rgba(255,255,255,0.88); padding: 6px 8px; border-radius: 6px; }