/* Plan Mayor · Brand kit */
:root {
  --cobalto: #263BCB; --marfil: #F4F2E9; --lima: #DDE96B; --tinta: #121C5C;
  --cobalto-15: color-mix(in srgb, var(--cobalto) 16%, #fff); --linea: color-mix(in srgb, var(--cobalto) 15%, transparent);
  --texto-1: color-mix(in srgb, var(--tinta) 88%, #9a9a9a); --texto-2: color-mix(in srgb, var(--tinta) 62%, #9a9a9a);
  --claro: color-mix(in srgb, #fff 86%, var(--cobalto)); --marfil-2: #E9E6DC;
  --titular: "Gantari", system-ui, sans-serif;
  --texto: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --salida: cubic-bezier(.16, 1, .3, 1);
}
/* Prueba de paleta verde (?paleta=verde): Pino, Marfil, Brote y Tinta. La vigente sigue siendo Nexo. */
html[data-paleta="verde"] { --cobalto: #1F5C46; --lima: #CDEB7B; --tinta: #0E2620; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--marfil); color: var(--tinta); font: 400 18px/1.55 var(--texto); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cobalto); color: var(--marfil); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
h1, h2, h3, .t { font-family: var(--titular); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
.eyebrow { font: 700 13px/1.2 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--cobalto); margin: 0; }
.muted { color: var(--texto-2); }
section { scroll-margin-top: 70px; }
.sec { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--linea); }
.sec > .wrap > h2 { font-size: clamp(40px, 6vw, 88px); color: var(--cobalto); margin: 14px 0 0; }
.sec .lead { max-width: 820px; margin: 16px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--texto-1); }
.dark-sec { background: var(--cobalto); color: var(--marfil); border-top: 0; }
.dark-sec .eyebrow { color: var(--lima); }
.dark-sec > .wrap > h2 { color: var(--marfil); }
.dark-sec .lead { color: var(--claro); }

/* barra superior */
.bar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--marfil) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.bar .wrap { display: flex; align-items: center; gap: 10px; height: 62px; }
.bar .brand { height: 26px; flex: none; display: block; }
.bar .brand svg { height: 100%; width: auto; }
.bar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.bar nav a { text-decoration: none; font: 700 14px/1 var(--texto); color: var(--cobalto); padding: 9px 7px; border-radius: 999px; white-space: nowrap; }
.bar nav a:hover { background: var(--cobalto-15); }
@media (max-width: 900px) { .bar nav { display: none; } .bar .wrap { justify-content: space-between; } }

/* portada */
.hero { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); }
.hero h1 { font-size: clamp(46px, 7.4vw, 112px); color: var(--cobalto); margin: 16px 0 0; max-width: 14ch; }
.hero .lead { max-width: 760px; font-size: clamp(18px, 1.6vw, 21px); margin-top: 20px; color: var(--texto-1); }
.stage { margin-top: clamp(28px, 4vw, 48px); border-radius: 18px; overflow: hidden; background: var(--cobalto); aspect-ratio: 16 / 9; position: relative; box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--tinta) 67%, transparent); }
.stage svg { width: 100%; height: 100%; }
.stage .replay { position: absolute; right: 14px; bottom: 14px; font: 700 14px/1 var(--texto); color: var(--cobalto); background: var(--marfil); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.cap { font-size: 14px; color: var(--texto-2); margin-top: 10px; }
.note { margin-top: 24px; background: #fff8; border-radius: 14px; padding: 14px 18px; box-shadow: inset 0 0 0 1.5px var(--linea); font-size: 15px; max-width: 900px; }

/* recomendación */

/* sistema: logotipo en la web, isotipo en redes */
.sys { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 28px; }
@media (max-width: 860px) { .sys { grid-template-columns: 1fr; } }
.sys article { background: #fff; border-radius: 18px; padding: clamp(18px, 2.4vw, 26px); box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; gap: 12px; align-content: start; }
.sys h3 { font-size: clamp(24px, 2.6vw, 32px); color: var(--cobalto); margin: 0; }
.sys p:not(.eyebrow) { margin: 0; font-size: 16px; color: var(--texto-1); }
.sys .pv { background: var(--marfil); border-radius: 12px; padding: clamp(22px, 3vw, 34px); display: grid; place-items: center; min-height: 150px; }
.sys .pv svg { width: min(100%, 460px); height: auto; }
.sys .pv.iso span { width: 112px; height: 112px; display: block; }
.sys .pv.iso span svg { width: 100%; height: 100%; }

/* logo */
.logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
@media (max-width: 860px) { .logos { grid-template-columns: 1fr; } }
.logos .c { border-radius: 16px; padding: clamp(40px, 4vw, 54px) clamp(22px, 4vw, 54px); display: grid; place-items: center; min-height: 200px; position: relative; }
.logos .c .tag { position: absolute; left: 14px; top: 12px; font: 700 11px/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto); opacity: .75; }
.logos .bg-cobalto .tag { color: var(--marfil); }
.logos .c.wide { grid-column: 1 / -1; min-height: 260px; }
.logos .c:not(.wide) svg { width: min(100%, 420px); }
.logos .bg-tinta .tag { color: var(--marfil); }
.logos .c svg { width: min(100%, 760px); height: auto; }
.bg-marfil { background: var(--marfil); box-shadow: inset 0 0 0 1.5px var(--linea); }
.bg-cobalto { background: var(--cobalto); }
.bg-lima { background: var(--lima); }
.bg-tinta { background: var(--tinta); }
.bg-blanco { background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); }
.rules { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 860px) { .rules { grid-template-columns: 1fr; } }
.rules .c { border-radius: 16px; padding: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); }
.rules h3 { font-size: 22px; color: var(--cobalto); margin: 0 0 12px; }
.clear { position: relative; padding: 42px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--lima) 33%, transparent) 0 6px, transparent 6px 12px); border-radius: 10px; }
.clear .inner { background: var(--marfil); padding: 6px; outline: 1.5px dashed var(--cobalto); }
.minis { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.minis figure { margin: 0; display: grid; justify-items: center; gap: 8px; font: 700 12px var(--texto); color: var(--texto-2); }
.dont { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.dont figure { margin: 0; background: #fff; border-radius: 14px; padding: 18px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.dont .box { height: 90px; display: grid; place-items: center; border-radius: 8px; position: relative; overflow: hidden; }
.dont .box svg { height: auto; width: min(86%, 230px); }
.dont .box > svg { width: 88%; height: auto; max-height: 46px; }
.dont figcaption { font-size: 14px; margin-top: 10px; color: var(--texto-2); }
.dont figcaption b { color: #C2410C; }

/* personaje */
.loops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 32px; }
@media (max-width: 980px) { .loops { grid-template-columns: repeat(2, 1fr); } }
.loops figure { margin: 0; }
.loops svg { width: 100%; height: auto; aspect-ratio: 1; }
.loops figcaption { margin-top: 10px; font-size: 15px; color: var(--claro); }
.loops figcaption b { display: block; font: 800 20px var(--titular); color: var(--marfil); }

/* color */
.swatches { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; gap: 10px; margin-top: 32px; }
@media (max-width: 860px) { .swatches { grid-template-columns: 1fr 1fr; } }
.sw { border-radius: 16px; padding: 20px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; }
.sw .n { font: 800 32px var(--titular); letter-spacing: -0.02em; }
.sw code { font: 700 15px/1.5 var(--texto); display: block; }
.sw small { display: block; font-size: 14px; margin-top: 6px; opacity: .85; }
.ratio { display: flex; height: 20px; border-radius: 999px; overflow: hidden; margin-top: 14px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 860px) { .pairs { grid-template-columns: 1fr 1fr; } }
.pairs div { border-radius: 12px; padding: 14px; font-size: 14px; }
.pairs b { font: 800 26px var(--titular); display: block; }

/* tipografía */
.type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
@media (max-width: 980px) { .type { grid-template-columns: 1fr; } }
.type .c { background: #fff; border-radius: 16px; padding: 24px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.type .c h3 { font: 700 13px var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto); margin: 0 0 14px; }
.type .spec { font-size: clamp(40px, 4.6vw, 64px); color: var(--cobalto); line-height: 1; }
.type p { margin: 12px 0 0; font-size: 16px; color: var(--texto-2); }
.scale { margin-top: 12px; background: #fff; border-radius: 16px; padding: 24px; box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; gap: 10px; }
.scale div { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--linea); padding-bottom: 10px; }
.scale small { width: 120px; flex: none; font: 700 12px var(--texto); color: var(--texto-2); letter-spacing: .06em; }
@media (max-width: 520px) {
  .scale div { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scale small { width: auto; }
}

/* perfil e instagram */
.avs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
@media (max-width: 860px) { .avs { grid-template-columns: 1fr; } }
.avs figure { margin: 0; background: #fff; border-radius: 16px; padding: 22px; box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; justify-items: center; gap: 14px; text-align: center; }
.avs .big { width: min(100%, 240px); aspect-ratio: 1; }
.avs .row { display: flex; align-items: flex-end; gap: 10px; }
.avs figcaption { font-size: 15px; color: var(--texto-2); }
.avs figcaption b { display: block; color: var(--cobalto); font: 800 20px var(--titular); }
.phones { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.phone { width: min(100%, 360px); border-radius: 46px; background: #0d0d0d; padding: 11px; box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--tinta) 67%, transparent); }
.scr { border-radius: 36px; overflow: hidden; background: #fff; color: #111; height: 720px; display: flex; flex-direction: column; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
.phone.dark .scr { background: #000; color: #f3f3f3; }
.sb { display: flex; justify-content: space-between; padding: 14px 26px 6px; font: 600 14px system-ui; flex: none; }
.igtop { display: flex; justify-content: space-between; align-items: center; padding: 4px 14px 8px; font: italic 700 21px Georgia, serif; flex: none; }
.stories { flex: none; display: flex; gap: 11px; padding: 4px 12px 10px; overflow: hidden; border-bottom: 1px solid #8883; }
.st { display: grid; justify-items: center; gap: 4px; font-size: 11px; width: 64px; flex: none; }
.st .rg { width: 62px; height: 62px; border-radius: 50%; padding: 2.5px; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.st .rg > * { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; overflow: hidden; object-fit: cover; }
.st .rg > span svg, .a32 svg, .prof .big svg, .hls span svg { width: 100%; height: 100%; display: block; }
.phone.dark .st .rg > * { border-color: #000; }
.ph { padding: 9px 12px; display: flex; align-items: center; gap: 10px; flex: none; }
.a32 { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: none; }
.a32 img { width: 100%; height: 100%; object-fit: cover; }
.ph b { font-size: 13px; } .ph small { display: block; font-size: 11px; opacity: .6; }
.pimg { flex: 1; min-height: 0; background: center / cover; }
.cm { padding: 8px 12px; display: flex; gap: 10px; font-size: 13px; line-height: 1.35; flex: none; }
.prof { display: flex; align-items: center; gap: 18px; padding: 4px 14px 0; flex: none; }
.prof .big { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; flex: none; }
.prof .nums { display: flex; flex: 1; justify-content: space-around; text-align: center; font-size: 12.5px; }
.prof .nums b { display: block; font-size: 16px; }
.bio { padding: 8px 14px; font-size: 13px; line-height: 1.35; flex: none; }
.bio a { color: #00376B; font-weight: 700; text-decoration: none; }
.btns { display: flex; gap: 6px; padding: 4px 14px 10px; flex: none; }
.btns span { flex: 1; text-align: center; font: 600 13px system-ui; padding: 8px 0; border-radius: 8px; background: #EFEFEF; }
.btns span.f { background: #0095F6; color: #fff; }
.hls { display: flex; gap: 12px; padding: 4px 14px 10px; flex: none; }
.hls div { display: grid; justify-items: center; gap: 5px; font-size: 11px; width: 62px; }
.hls span { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 1px #DBDBDB, inset 0 0 0 3px #fff; overflow: hidden; display: grid; place-items: center; }
.grid9 { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; gap: 2px; flex: 1; align-content: start; overflow: hidden; }
.post { position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; background: var(--cobalto); color: var(--marfil); }
.post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tinta) 0%, transparent) 40%, color-mix(in srgb, var(--tinta) 80%, transparent) 100%); }
.post .tx { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; margin: 0; font: 800 11cqw/0.98 var(--titular); letter-spacing: -0.02em; }
.post.top .tx { top: 8cqw; bottom: auto; }
.post.lima { background: var(--lima); color: var(--cobalto); }
.post.marfil { background: var(--marfil); color: var(--cobalto); }
.post .lk { position: absolute; left: 8cqw; bottom: 8cqw; width: 50cqw; }
.post .lk svg { width: 100%; height: auto; }
.post .ic { position: absolute; left: 50%; top: 42%; width: 46cqw; transform: translate(-50%, -50%); }
.post .badge { position: absolute; left: 7cqw; top: 7cqw; width: 15cqw; border-radius: 50%; overflow: hidden; }
.post em { font-style: normal; color: var(--lima); }

/* aplicaciones */
.apps { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-top: 32px; align-items: start; }
@media (max-width: 980px) { .apps { grid-template-columns: 1fr; } }
.browser { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--tinta) 67%, transparent), 0 0 0 1px color-mix(in srgb, var(--tinta) 13%, transparent); }
.browser .chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--marfil-2); }
.browser .dots { display: flex; gap: 6px; } .browser .dots i { width: 11px; height: 11px; border-radius: 50%; background: #c9c4b6; display: block; }
.browser .tab { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px 10px 0 0; padding: 7px 12px; font: 600 13px system-ui; margin-bottom: -10px; }
.browser .tab span { width: 16px; height: 16px; display: block; }
.browser .url { flex: 1; background: #fff; border-radius: 999px; padding: 6px 12px; font: 13px system-ui; color: #555; }
.cta { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; background: var(--lima); color: var(--cobalto); font: 700 15px var(--texto); padding: 13px 18px; border-radius: 999px; }
.widget { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 14px 18px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tinta) 60%, transparent); font: 700 14px var(--texto); color: var(--cobalto); z-index: 3; }
.side { display: grid; gap: 18px; }
.home .scr { background: linear-gradient(160deg, color-mix(in srgb, var(--cobalto) 90%, #fff), var(--tinta)); color: #fff; height: 440px; padding: 0; }
.under { display: grid; grid-template-columns: 300px 1fr; gap: 18px; margin-top: 18px; align-items: start; }
@media (max-width: 760px) { .under { grid-template-columns: 1fr; } }
.under .phone { width: 300px; }
.cards { display: grid; gap: 14px; }
.notif { display: flex; gap: 12px; align-items: flex-start; background: #ffffffd9; border-radius: 22px; padding: 14px 16px; box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--tinta) 67%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent); font: 14px/1.35 -apple-system, 'Segoe UI', system-ui, sans-serif; }
.notif .ic { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; }
.notif b { display: block; font-size: 14px; }
.notif small { margin-left: auto; color: #777; font-size: 12px; }
.tabs { background: var(--marfil-2); border-radius: 14px; padding: 10px 10px 0; display: flex; gap: 6px; overflow: hidden; }
.tabs span { display: flex; align-items: center; gap: 8px; background: #d9d4c6; border-radius: 10px 10px 0 0; padding: 9px 12px; font: 600 13px system-ui; white-space: nowrap; color: #333; }
.tabs span.on { background: #fff; }
.tabs i { width: 16px; height: 16px; display: block; border-radius: 4px; background: #8888; }
.cardnote { font-size: 14px; color: var(--texto-2); margin: 0; }
.widget .dot { width: 10px; height: 10px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 4px #34C75933; flex: none; }
.home .icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; padding: 26px 18px; }
.home .icons div { display: grid; justify-items: center; gap: 6px; font: 11px system-ui; }
.home .icons span { width: 58px; height: 58px; border-radius: 14px; display: block; overflow: hidden; background: #ffffff2a; }
.home .icons .pm span { box-shadow: 0 6px 16px -6px #000a; }

/* motion */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
.specs div { border-radius: 14px; padding: 18px; background: #ffffff12; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marfil) 20%, transparent); color: var(--claro); font-size: 16px; }
.specs b { display: block; font: 800 22px var(--titular); color: var(--marfil); margin-bottom: 6px; }
.vids { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 28px; align-items: start; }
.vids .specs { grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 860px) { .vids { grid-template-columns: 1fr; } }
.vids video { width: 100%; border-radius: 14px; background: #000; }
.vids p { color: var(--claro); font-size: 15px; margin: 8px 0 0; }

/* descargas */
.dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
@media (max-width: 860px) { .dl { grid-template-columns: 1fr; } }
.dl div { border-radius: 14px; padding: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linea); }
.dl h3 { font: 700 13px var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto); margin: 0 0 8px; }
.dl ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
footer { padding: 40px 0 60px; font-size: 14px; color: var(--texto-2); }
.under .home .scr { height: 380px; }
.under .home .icons { gap: 16px 6px; padding: 22px 12px; }
.under .home .icons span { width: 50px; height: 50px; border-radius: 12px; }
.notif small { white-space: nowrap; }
@media (max-width: 760px) { .under .phone { width: min(100%, 300px); } .scr { height: 640px; } }
@media (max-width: 860px) { .vids, .vids .specs { grid-template-columns: 1fr; } }

/* anexo: mascotas opcionales */
.mascotas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
@media (max-width: 960px) { .mascotas { grid-template-columns: 1fr; } }
.mascota { background: #fff; border-radius: 22px; padding: 18px; box-shadow: inset 0 0 0 1.5px var(--linea); display: grid; gap: 12px; align-content: start; }
.mascota-grande { background: var(--marfil); border-radius: 16px; height: 240px; display: grid; place-items: center; padding: 24px; }
.mascota-grande img { max-height: 190px; width: auto; }
.mascota-usos { display: flex; align-items: flex-end; gap: 12px; }
.mascota .av { width: var(--t); height: var(--t); border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.mascota .av img { width: 68%; height: 68%; object-fit: contain; }
.av-cobalto { background: var(--cobalto); }
.av-marfil { background: var(--marfil); box-shadow: inset 0 0 0 1.5px var(--linea); }
.mascota h3 { font-size: 28px; color: var(--cobalto); margin: 4px 0 0; }
.mascota .origen { font: 700 12px/1.3 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); margin: 0; }
.mascota p { margin: 0; font-size: 15px; }

/* selector de paleta (Nexo / Verde) */
.paleta { display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linea); flex: none; }
.paleta a { font: 700 13px/1 var(--texto); padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--cobalto); transition: background .25s, color .25s; }
.paleta a:hover { background: var(--cobalto-15); }
.paleta a[aria-current="true"] { background: var(--cobalto); color: var(--marfil); }
.aviso-paleta { margin: 18px 0 0; max-width: 820px; padding: 14px 18px; border-radius: 14px; background: var(--lima); color: var(--tinta); font-size: 16px; }
.aviso-paleta a { font-weight: 700; }
.nota-paleta { margin-top: 28px; max-width: 880px; background: #fff; border-radius: 18px; padding: clamp(18px, 3vw, 28px); box-shadow: inset 0 0 0 1.5px var(--linea); }
.nota-paleta h3 { margin: 0 0 6px; font-size: 26px; color: var(--cobalto); }
.nota-paleta p { margin: 10px 0 0; font-size: 16px; color: var(--texto-1); }

/* Instagram: perfil de escritorio */
.igweb { max-width: 980px; margin: 36px auto 0; background: #fff; color: #111; border-radius: 22px; padding: clamp(18px, 4vw, 44px) clamp(10px, 4.6vw, 56px) clamp(10px, 3vw, 32px); font-family: -apple-system, "Segoe UI", system-ui, sans-serif; box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--tinta) 55%, transparent), inset 0 0 0 1px #0000000f; }
.igw-top { display: flex; align-items: center; gap: clamp(18px, 6vw, 84px); padding-inline: clamp(4px, 3vw, 40px); }
.igw-av { width: clamp(78px, 15vw, 150px); aspect-ratio: 1; flex: none; border-radius: 50%; overflow: hidden; }
.igw-av svg { width: 100%; height: 100%; display: block; }
.igw-info { display: grid; gap: 14px; min-width: 0; }
.igw-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.igw-user { font-size: 20px; font-weight: 400; margin-right: 10px; }
.igw-btn { font: 600 14px system-ui; padding: 7px 16px; border-radius: 8px; background: #EFEFEF; }
.igw-btn.azul { background: #0095F6; color: #fff; }
.igw-mas { padding: 0 6px; letter-spacing: .1em; }
.igw-nums { display: flex; flex-wrap: wrap; gap: 6px 32px; font-size: 16px; }
.igw-nums b { font-weight: 600; }
.igw-bio { font-size: 14px; line-height: 1.45; max-width: 46ch; }
.igw-bio b, .igw-bio .cat, .igw-bio a { display: block; }
.igw-bio .cat { color: #737373; }
.igw-bio a { color: #00376B; font-weight: 600; text-decoration: none; }
.igw-hls { display: flex; gap: clamp(16px, 4vw, 46px); padding: clamp(24px, 4vw, 44px) clamp(6px, 3vw, 40px) clamp(20px, 3vw, 30px); overflow-x: auto; scrollbar-width: none; }
.igw-hls > div { display: grid; justify-items: center; gap: 10px; flex: none; font: 600 12px system-ui; }
.hl { width: clamp(58px, 8vw, 77px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #DBDBDB; margin: 4px; }
.hl b { font: 800 clamp(16px, 2vw, 22px)/1 var(--titular); letter-spacing: -0.02em; }
.hl svg, .hl img { width: 100%; height: 100%; display: block; object-fit: cover; }
.igw-tabs { display: flex; justify-content: center; gap: clamp(24px, 6vw, 60px); border-top: 1px solid #DBDBDB; font: 600 12px system-ui; letter-spacing: .08em; text-transform: uppercase; color: #737373; }
.igw-tabs span { padding: 16px 0 14px; margin-top: -1px; }
.igw-tabs .on { color: #111; border-top: 1px solid #111; }
.igw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 600px) {
  .igweb { border-radius: 16px; padding: 18px 0 0; overflow: hidden; }
  .igw-top { padding-inline: 16px; align-items: flex-start; }
  .igw-user { font-size: 18px; }
  .igw-btn { padding: 6px 12px; font-size: 13px; }
  .igw-nums { gap: 4px 16px; font-size: 14px; }
  .igw-hls { padding-inline: 16px; }
  .igw-grid { gap: 2px; }
}

/* publicaciones en la grilla (3:4) y colores de pieza */
.c-cobalto { background: var(--cobalto); color: var(--marfil); }
.c-lima { background: var(--lima); color: var(--cobalto); }
.c-marfil { background: var(--marfil); color: var(--cobalto); }
.c-tinta { background: var(--tinta); color: var(--marfil); }
.t34 { position: relative; aspect-ratio: 3 / 4; overflow: hidden; container-type: inline-size; }
.t34.foto { background: var(--tinta); color: var(--marfil); }
.t34.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t34 .sombra { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--tinta) 82%, transparent) 100%); }
.t34 .h, .lam .h { margin: 0; font: 800 11.5cqw/0.98 var(--titular); letter-spacing: -0.025em; text-wrap: balance; }
.t34 .h { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; }
.t34 .h.arriba { top: 9cqw; bottom: auto; font-size: 12.5cqw; }
.t34 .sub { position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw; margin: 0; font: 700 5.6cqw/1.3 var(--texto); }
.t34 .firma, .lam .firma { position: absolute; left: 8cqw; bottom: 8cqw; width: 40cqw; }
.t34 .firma svg, .lam .firma svg { width: 100%; height: auto; display: block; }
.t34 .t-ico { position: absolute; right: 5cqw; top: 5cqw; width: 9cqw; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
.t34 .t-ico svg { width: 100%; height: auto; display: block; }
.c-marfil .t-ico, .c-lima .t-ico { color: var(--cobalto); filter: none; }
.t34.iso .cara { position: absolute; left: 50%; top: 40%; width: 44cqw; transform: translate(-50%, -50%); }
.t34.iso .cara svg { width: 100%; height: auto; display: block; }
.t34.iso .h { text-align: center; font-size: 10cqw; }
.t34 .ceja, .lam .ceja { margin: 0; font: 700 4.6cqw/1.2 var(--texto); letter-spacing: .14em; text-transform: uppercase; }
.t34.lista .ceja { position: absolute; left: 8cqw; top: 9cqw; }
.t34.lista ol { position: absolute; left: 8cqw; right: 8cqw; top: 22cqw; margin: 0; padding: 0; list-style: none; display: grid; gap: 6cqw; font: 800 9cqw/1.02 var(--titular); letter-spacing: -0.02em; }
.t34.lista li { display: flex; gap: 3.6cqw; align-items: flex-start; }
.t34.lista li i { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; margin-top: .3cqw; border-radius: 50%; background: var(--cobalto); color: var(--marfil); font: 800 5cqw/1 var(--titular); font-style: normal; }
.t34.producto .chips { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; display: grid; gap: 3.2cqw; justify-items: start; }
.chips span { font: 700 6cqw/1 var(--texto); padding: 3.6cqw 5.4cqw; border-radius: 999px; }
.chips .hecho { background: var(--cobalto); color: var(--marfil); }
.chips .aun { box-shadow: inset 0 0 0 .5cqw var(--cobalto); }
.chips .conv { background: var(--lima); color: var(--cobalto); box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--cobalto) 18%, transparent); }

/* guía del feed y carrusel */
.ig-guia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
@media (max-width: 900px) { .ig-guia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ig-guia { grid-template-columns: 1fr; } }
.ig-guia div { background: #fff; border-radius: 16px; padding: 18px; box-shadow: inset 0 0 0 1.5px var(--linea); font-size: 15px; color: var(--texto-2); }
.ig-guia b { display: block; margin-bottom: 6px; font: 800 19px/1.15 var(--titular); color: var(--cobalto); }
.ig-sub { margin: 52px 0 0; font-size: clamp(26px, 3vw, 36px); color: var(--cobalto); }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 2px 18px; scrollbar-width: thin; }
.lam { position: relative; flex: 0 0 clamp(220px, 24vw, 280px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; container-type: inline-size; scroll-snap-align: start; box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--tinta) 60%, transparent); }
.lam.c-marfil { box-shadow: inset 0 0 0 1.5px var(--linea), 0 18px 40px -30px color-mix(in srgb, var(--tinta) 60%, transparent); }
.lam .pag { position: absolute; right: 5cqw; top: 5cqw; font: 600 4.4cqw/1 system-ui; padding: 2.4cqw 3.4cqw; border-radius: 999px; background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
.lam .ceja { position: absolute; left: 8cqw; right: 24cqw; top: 9cqw; color: var(--lima); }
.lam.portada .h { position: absolute; left: 8cqw; right: 8cqw; top: 22cqw; font-size: 15cqw; }
.lam.portada .desliza { position: absolute; right: 8cqw; bottom: 8.6cqw; font: 700 5cqw/1 var(--texto); color: var(--lima); }
.lam .num { position: absolute; left: 8cqw; top: 9cqw; font: 800 16cqw/1 var(--titular); letter-spacing: -0.03em; color: var(--cobalto); background: linear-gradient(transparent 62%, var(--lima) 62%, var(--lima) 92%, transparent 92%); padding-inline: 1cqw; }
.lam.c-marfil .h { position: absolute; left: 8cqw; right: 8cqw; top: 36cqw; font-size: 10.5cqw; }
.lam .sub { position: absolute; left: 8cqw; right: 8cqw; bottom: 9cqw; margin: 0; font: 400 5.2cqw/1.4 var(--texto); color: var(--texto-1); }
.lam.cierre .cara { position: absolute; left: 8cqw; top: 11cqw; width: 24cqw; }
.lam.cierre .cara svg { width: 100%; height: auto; display: block; }
.lam.cierre .h { position: absolute; left: 8cqw; right: 8cqw; top: 46cqw; font-size: 11cqw; }
.lam.cierre .sub { color: var(--cobalto); font-size: 4.6cqw; }
.ig-caption { display: flex; gap: 10px; align-items: flex-start; max-width: 720px; margin: 2px 0 0; font-size: 15px; }
.ig-caption .tags { color: #00376B; }

/* aplicaciones: la web real */
.web-real { position: relative; overflow: hidden; background: var(--cobalto); }
.web-real > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.web-foto { position: absolute; overflow: hidden; }
.web-foto video { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.06); opacity: 0; transition: opacity .9s ease; }
.web-foto video.en-marcha { opacity: 1; }
.web-real > img.capa { z-index: 1; }
.web-movil .scr { height: auto; background: var(--cobalto); color: var(--marfil); }
.web-movil .sb { background: var(--cobalto); }
.side .cardnote { padding-inline: 6px; }