/* MediaSnout historia (template-mediasnout.php), hermana de template-pawcode.css.
   Un solo escenario fijo (sticky) que avanza con el scroll. En el centro hay
   siempre un celular; en su pantalla se prende una capa por fase y alrededor
   van notas, plataformas, petfluencers y piezas de marca.
   El JS pone data-fase y los data-on de cada cosa.
   Ojo: ningún ancestro puede tener overflow (desactiva el sticky). */

.msn { position: relative; height: 1800svh; }
body.page-template-template-mediasnout { background: #fff; }
.msn__escena {
	position: sticky; top: 0; height: 100svh; overflow: hidden;
	background: #fff; color: #111;
	/* Colores de MediaSnout: teal del pilar del inicio. --ms: fondo; --ms-texto: teal oscuro para texto y líneas
	   sobre blanco; --ms-claro: teal muy claro para fondos. GATERING sigue con su magenta y amarillo. */
	--ms: #2F9997; --ms-texto: #1D7472; --ms-claro: #DDF2F1; --magenta: #FF006E; --amarillo: #FFD60A; --wa: #25D366;
	--tope: calc(var(--alto-menu, 66px) + clamp(10px, 3svh, 32px));
	/* Zona libre entre el título (hasta 2 líneas) y el párrafo: ahí va el celular, centrado. */
	--zona-arriba: calc(var(--tope) + 128px); --zona-abajo: clamp(112px, 19svh, 190px);
	--zona: calc(100svh - var(--zona-arriba) - var(--zona-abajo));
	--hc: min(560px, calc(var(--zona) - 8px)); --wc: min(calc(var(--hc) * .5), 64vw);   /* celular */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--rebote: cubic-bezier(.34, 1.56, .64, 1);
	transition: background-color .6s var(--ease), color .6s var(--ease);
}
.msn__escena[data-fase="0"] { background: var(--ms); color: #fff; }

/* ---------- textos: título arriba, párrafo abajo (uno por fase) ---------- */
.msn__arriba, .msn__abajo {
	position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0 16px; text-align: center; z-index: 3;
	opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease);
	pointer-events: none;
}
.msn__arriba { top: var(--tope); max-width: 900px; }
.msn__abajo { bottom: clamp(52px, 10svh, 110px); max-width: 680px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.msn__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-texto); transition: color .5s; }
.msn__escena[data-fase="0"] .msn__eyebrow { color: #fff; opacity: .85; }
.msn__titulo {
	margin: 10px auto 0; max-width: 24ch; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none;
	font-size: clamp(24px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: inherit;
}
.msn__escena[data-fase="0"] .msn__arriba[data-texto="0"], .msn__arriba[data-on] { opacity: 1; transform: none; }
.msn__escena[data-fase="0"] .msn__abajo[data-texto="0"], .msn__abajo[data-on] { opacity: .78; transform: none; }

/* ---------- intro: MEDIASNOUT con REC y ecualizador ---------- */
.msn__intro {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2svh;
	color: #fff; transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none;
}
.msn__nombre { font-family: var(--koi-font-display); font-size: min(12.5vw, 22svh); line-height: 1; transform: translateY(.08em); }
.msn__rec { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .2em; }
.msn__rec i { width: 12px; height: 12px; border-radius: 50%; background: #FF3B30; animation: msn-parpadeo 1.2s steps(1) infinite; }
@keyframes msn-parpadeo { 50% { opacity: .15; } }
.msn__eq { display: flex; align-items: flex-end; gap: 5px; height: 7svh; }
.msn__eq i { width: clamp(4px, .6vw, 8px); height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .8); transform-origin: bottom; animation: msn-eq 1.1s var(--ease) calc(var(--i) * -.13s) infinite alternate; }
@keyframes msn-eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.msn__escena:not([data-fase="0"]) .msn__intro { opacity: 0; transform: scale(.85); }

/* ---------- el celular del centro ---------- */
.msn__centro, .msn__notas, .msn__alrededor, .msn__piezas { position: absolute; inset: var(--zona-arriba) 0 var(--zona-abajo) 0; }
.msn__centro { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.msn__celu {
	position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
	width: var(--wc); height: var(--hc); border: 9px solid #111; border-radius: 40px; background: #fff;
	box-shadow: 0 30px 70px rgba(17, 17, 17, .18), 0 0 0 1px rgba(17, 17, 17, .1);
	opacity: 0; transform: translateY(40px) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--rebote);
}
.msn__escena:not([data-fase="0"]) .msn__celu { opacity: 1; transform: none; }
.msn__estado {
	flex: none; position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
	height: 28px; padding: 0 18px; background: #fff; font-size: 11px; transition: background-color .4s, color .4s;
}
.msn__estado b { font-weight: 700; }
.msn__isla { position: absolute; left: 50%; top: 5px; width: 34%; height: 18px; border-radius: 999px; background: #111; transform: translateX(-50%); }
.msn__senal { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.msn__senal i { width: 3px; border-radius: 1px; background: currentColor; }
.msn__senal i:nth-child(1) { height: 4px; }
.msn__senal i:nth-child(2) { height: 6px; }
.msn__senal i:nth-child(3) { height: 9px; margin-right: 4px; box-shadow: 7px 0 0 0 currentColor, 11px 0 0 0 currentColor; }
/* En la cámara, TikTok y la story la barra de estado va sobre fondo oscuro/color. */
.msn__escena[data-fase="2"] .msn__estado, .msn__escena[data-oscuro] .msn__estado { background: #111; color: #fff; }
.msn__escena[data-fase="8"] .msn__estado { background: var(--amarillo); }
.msn__escena[data-fase="5"] .msn__estado { background: #0B6E5E; color: #fff; }
.msn__pantalla {
	position: relative; flex: 1; overflow: hidden; container-type: inline-size; background: #fff;
	font-family: var(--koi-font-texto); color: #1A1A1A; text-align: left;
}

/* Capas: una por fase, se cruzan con un fundido. */
.msn-capa { position: absolute; inset: 0; font-size: max(9px, 6.2cqw); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.msn-capa[data-on] { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }

/* ---------- piezas comunes de la marca GATERING ---------- */
.msn-peludo { display: block; width: 100%; height: 100%; }
.msn-logo { font-family: 'Fascinate', var(--koi-font-display); font-weight: 400; line-height: 1; color: var(--magenta); letter-spacing: .01em; }
.msn-btn { display: inline-flex; align-items: center; justify-content: center; padding: .7em 1.2em; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .82em; font-weight: 700; white-space: nowrap; box-shadow: 0 .4em 1em rgba(255, 0, 110, .28); }
.msn-etiqueta { display: inline-block; padding: .3em .7em; border-radius: 999px; background: rgba(26, 26, 26, .9); color: #fff; font-size: .6em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.msn-paquete {
	position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end;
	width: 2.6em; height: 3.4em; padding-bottom: .45em; box-sizing: border-box; flex: none;
	border-radius: .25em .25em .5em .5em; background: var(--magenta); color: #fff;
	box-shadow: inset 0 .45em 0 rgba(255, 255, 255, .18), 0 .4em .9em rgba(26, 26, 26, .2);
}
.msn-paquete::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .35em; border-radius: .25em .25em 0 0; background: rgba(26, 26, 26, .16); }
.msn-paquete b { font-family: 'Fascinate', var(--koi-font-display); font-weight: 400; font-size: .44em; line-height: 1; color: var(--amarillo); }
.msn-paquete--amarillo { background: #F2A900; }
.msn-paquete--amarillo b { color: #fff; }
.msn-paquete--teal { background: var(--ms); }
.msn-avatar { flex: none; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; overflow: hidden; background: #eee; font-weight: 800; }
.msn-avatar .msn-peludo { width: 115%; height: 115%; margin-top: 12%; }
.msn-avatar--marca { background: var(--amarillo); color: var(--magenta); font-family: 'Fascinate', var(--koi-font-display); font-weight: 400; font-size: 1em; box-shadow: 0 0 0 .12em #fff, 0 0 0 .24em var(--magenta); }
.msn-wa { display: inline-flex; align-items: center; justify-content: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--wa); box-shadow: 0 .5em 1.2em rgba(37, 211, 102, .45); }
.msn-wa svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; }
.msn-sello { position: absolute; right: 6%; top: 7%; padding: .35em .6em; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .75em; font-weight: 800; }

/* ---------- fase 1: la web de GATERING ---------- */
/* Fase 1: la web de GATERING en una ventana de computador (la ficha compartida con PawCode,
   recursos/css/gatering-pdp.css). El celular se esconde en esta fase y vuelve en la 2. */
.msn__escena { --wpc: min(780px, 88vw); --hpc: min(440px, calc(var(--zona) - 12px)); }
.msn-pc {
	position: absolute; inset: 0; margin: auto; z-index: 2; display: flex; flex-direction: column; overflow: hidden;
	width: var(--wpc); height: var(--hpc); border-radius: 14px; background: #fff;
	box-shadow: 0 30px 70px rgba(17, 17, 17, .18), 0 0 0 1px rgba(17, 17, 17, .1);
	opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .5s var(--ease), transform .7s var(--rebote);
}
.msn__escena[data-fase="1"] .msn-pc { opacity: 1; transform: none; }
.msn__escena[data-fase="1"] .msn__celu { opacity: 0; transform: translateY(40px) scale(.9); }
.msn-pc__barra { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F2F3F5; border-bottom: 1px solid rgba(17, 17, 17, .06); }
.msn-pc__barra i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.msn-pc__barra i:nth-child(2) { background: #FEBC2E; }
.msn-pc__barra i:nth-child(3) { background: #28C840; }
.msn-pc__barra span { margin: 0 auto; padding: 3px 40px; border-radius: 6px; background: #fff; font-size: 12px; color: rgba(17, 17, 17, .55); transform: translateX(-20px); }
.msn-pc__pantalla { position: relative; flex: 1; overflow: hidden; container-type: inline-size; font-size: clamp(11px, 1.6cqw, 14px); }
/* El píxel arriba a la derecha (debajo del menú) para no tapar la compra; WhatsApp flotando abajo. */
.msn-pc .msn-web__pixel { left: auto; right: 1.2em; top: 5.2em; bottom: auto; z-index: 4; }
.msn-pc .msn-web__wa { z-index: 4; right: 1.2em; bottom: 1.2em; }
.msn-web__pixel { bottom: 4.4em; }
.msn-web__pixel {
	position: absolute; left: .9em; bottom: 1.1em; display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em;
	border-radius: 999px; background: #111; color: #fff; font-size: .68em; font-weight: 700;
	opacity: 0; transform: translateY(.6em); transition: opacity .3s, transform .5s var(--rebote);
}
.msn-web__pixel i { width: .6em; height: .6em; border-radius: 50%; background: var(--wa); }
.msn-web__pixel[data-on] { opacity: 1; transform: none; }
.msn-web__wa { position: absolute; right: .9em; bottom: .9em; transform: scale(0); transition: transform .6s var(--rebote); }
.msn-web__wa[data-on] { transform: scale(1); animation: msn-latido 1.6s var(--ease) .6s infinite; }
@keyframes msn-latido { 0% { box-shadow: 0 .5em 1.2em rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 .5em 1.2em rgba(37, 211, 102, .45), 0 0 0 .9em rgba(37, 211, 102, 0); } }

/* ---------- fase 2: la cámara ---------- */
.msn-cam { background: #111; color: #fff; }
.msn-cam__visor { position: absolute; inset: 2.6em 0 6em; overflow: hidden; background: #FFD60A; }
.msn-cam__toma { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .5s var(--ease), transform 3s linear; }
.msn-cam__toma .msn-peludo { width: 82%; height: 82%; }
.msn-cam__toma .msn-paquete { position: absolute; right: 10%; bottom: 8%; font-size: 1.3em; transform: rotate(8deg); }
.msn-cam__toma--1 { background: #BFEAE8; }
.msn-cam__toma:not([data-on]) { opacity: 0; }
.msn-cam__toma[data-on] { transform: scale(1.08); }
.msn-cam__grilla { position: absolute; inset: 0; background:
	linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255, 255, 255, .55) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255, 255, 255, .55) 66.6%, transparent calc(66.6% + .5px)),
	linear-gradient(transparent calc(33.3% - .5px), rgba(255, 255, 255, .55) 33.3%, transparent calc(33.3% + .5px), transparent calc(66.6% - .5px), rgba(255, 255, 255, .55) 66.6%, transparent calc(66.6% + .5px)); }
.msn-cam__foco { position: absolute; left: 50%; top: 45%; width: 4.5em; height: 4.5em; border: .12em solid #FFD60A; border-radius: .3em; transform: translate(-50%, -50%); animation: msn-foco 2.4s var(--ease) infinite; }
.msn-cam__visor:has(.msn-cam__toma--0:not([data-on])) .msn-cam__foco { border-color: #fff; }
@keyframes msn-foco { 0%, 100% { transform: translate(-50%, -50%) scale(1.25); opacity: .2; } 20%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.msn-cam__arriba { position: absolute; left: 0; right: 0; top: 0; height: 2.6em; display: flex; align-items: center; justify-content: space-between; padding: 0 .9em; font-size: .75em; font-weight: 700; }
.msn-cam__rec { display: inline-flex; align-items: center; gap: .4em; padding: .25em .6em; border-radius: .4em; background: #FF3B30; }
.msn-cam__rec i { width: .55em; height: .55em; border-radius: 50%; background: #fff; animation: msn-parpadeo 1s steps(1) infinite; }
.msn-cam__rec b { font-variant-numeric: tabular-nums; }
.msn-cam__toma-n { position: absolute; left: 50%; bottom: 6.6em; padding: .3em .7em; border-radius: 999px; background: rgba(17, 17, 17, .6); font-size: .65em; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }
.msn-cam__abajo { position: absolute; left: 0; right: 0; bottom: 4.3em; display: flex; justify-content: center; gap: 1.2em; font-size: .62em; font-weight: 700; letter-spacing: .1em; opacity: .6; }
.msn-cam__abajo .on { color: #FFD60A; opacity: 1; }
.msn-cam__boton { position: absolute; left: 50%; bottom: .9em; width: 3em; height: 3em; border-radius: 50%; box-shadow: inset 0 0 0 .2em #fff; transform: translateX(-50%); display: grid; place-items: center; }
.msn-cam__boton i { width: 1.2em; height: 1.2em; border-radius: .25em; background: #FF3B30; }

/* ---------- fase 3: el anuncio en cada plataforma ---------- */
.msn-plat { position: absolute; inset: 0; opacity: 0; transform: translateX(8%); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.msn-plat[data-on] { opacity: 1; transform: none; }
.msn-plat[data-antes] { transform: translateX(-8%); }
/* Publicación tipo feed (Meta, LinkedIn y la petfluencer). */
.msn-post__cabeza { display: flex; align-items: center; gap: .55em; padding: .7em .8em; }
.msn-post__cabeza > span:nth-child(2) { flex: 1; min-width: 0; }
.msn-post__cabeza b { display: block; font-size: .78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-post__cabeza small { display: block; font-size: .62em; color: rgba(26, 26, 26, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-post__cabeza i { font-style: normal; font-weight: 800; opacity: .6; }
.msn-post__cabeza .msn-avatar { width: 2em; height: 2em; font-size: .85em; }
.msn-post__foto { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: .6em; aspect-ratio: 1; padding-bottom: 1em; overflow: hidden; background: var(--f); }
.msn-post__foto .msn-peludo { position: absolute; left: 6%; bottom: -4%; width: 70%; height: 70%; }
.msn-post__foto .msn-paquete { position: absolute; right: 12%; bottom: 10%; font-size: 1.25em; transform: rotate(7deg); }
.msn-post__cta { display: flex; justify-content: space-between; padding: .65em .8em; background: #0866FF; color: #fff; font-size: .72em; font-weight: 700; }
.msn-post__cta em { font-style: normal; }
.msn-post__acciones { display: flex; gap: .8em; padding: .55em .8em .2em; font-size: 1em; }
.msn-post__acciones i { font-style: normal; }
.msn-post__texto { margin: 0; padding: .2em .8em; font-size: .68em; line-height: 1.4; }
/* Google */
.msn-plat--google { padding: .8em; }
.msn-g__buscar { padding: .6em .9em; border-radius: 999px; box-shadow: 0 .15em .6em rgba(26, 26, 26, .15); font-size: .72em; }
.msn-g__buscar::before { content: '⌕ '; opacity: .5; }
.msn-g__tabs { display: flex; gap: .9em; margin: .7em 0 .6em; padding-bottom: .4em; border-bottom: 1px solid #EEE; font-size: .6em; color: rgba(26, 26, 26, .6); }
.msn-g__tabs b { color: #1A73E8; }
.msn-g__res small { font-size: .6em; }
.msn-g__titulo { display: block; margin: .2em 0; font-size: .86em; line-height: 1.2; font-weight: 500; color: #1A0DAB; }
.msn-g__res p { margin: 0; font-size: .62em; line-height: 1.4; color: rgba(26, 26, 26, .75); }
.msn-g__links { display: flex; gap: .5em; margin-top: .5em; }
.msn-g__links i { padding: .35em .6em; border-radius: 999px; box-shadow: inset 0 0 0 1px #DDD; font-style: normal; font-size: .58em; color: #1A0DAB; }
.msn-g__sub { display: block; margin: 1em 0 .4em; font-size: .6em; font-weight: 700; }
.msn-g__shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.msn-g__shop > span { display: flex; flex-direction: column; gap: .1em; padding: .4em; border-radius: .6em; box-shadow: inset 0 0 0 1px #EEE; }
.msn-g__shop .msn-paquete { align-self: center; margin: .2em 0 .3em; font-size: .75em; }
.msn-g__shop > span::before { content: ''; }
.msn-g__shop > span { background: linear-gradient(var(--f) 0 3.4em, #fff 3.4em); }
.msn-g__shop b { font-size: .7em; }
.msn-g__shop small { font-size: .55em; color: rgba(26, 26, 26, .6); }
/* TikTok */
.msn-plat--tiktok { background: #111; color: #fff; }
.msn-tt__video { position: absolute; inset: 0; background: linear-gradient(#FFB23F, #FF7A45); }
.msn-tt__video .msn-peludo { position: absolute; left: 8%; top: 22%; width: 84%; height: 50%; animation: msn-baile 1.4s var(--ease) infinite alternate; }
@keyframes msn-baile { from { transform: rotate(-5deg); } to { transform: rotate(5deg) translateY(-3%); } }
.msn-tt__video .msn-paquete { position: absolute; left: 12%; top: 60%; font-size: 1.1em; transform: rotate(-12deg); }
.msn-tt__tabs { position: absolute; top: .7em; left: 0; right: 0; display: flex; justify-content: center; gap: 1em; font-size: .72em; }
.msn-tt__tabs span { opacity: .7; }
.msn-tt__tabs b { border-bottom: .15em solid #fff; }
.msn-tt__lado { position: absolute; right: .6em; bottom: 5.5em; display: flex; flex-direction: column; align-items: center; gap: .7em; }
.msn-tt__lado i { display: flex; flex-direction: column; align-items: center; font-style: normal; font-size: 1.2em; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.msn-tt__lado small { font-size: .45em; font-weight: 700; }
.msn-tt__pie { position: absolute; left: .8em; right: 3.6em; bottom: .8em; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.msn-tt__pie b { font-size: .8em; }
.msn-tt__pie small { margin-left: .4em; padding: .1em .4em; border-radius: .3em; background: rgba(255, 255, 255, .25); font-size: .55em; }
.msn-tt__pie p { margin: .3em 0 .5em; font-size: .64em; line-height: 1.35; }
.msn-tt__cta { display: block; padding: .55em; border-radius: .4em; background: #FE2C55; text-align: center; font-size: .7em; font-weight: 700; text-shadow: none; }
/* Pinterest */
.msn-plat--pinterest { padding: .8em; }
.msn-pin__buscar { padding: .55em .9em; border-radius: 999px; background: #EFEFEF; font-size: .7em; }
.msn-pin__grilla { columns: 2; column-gap: .5em; margin-top: .7em; }
.msn-pin { position: relative; display: block; height: var(--h); margin-bottom: .5em; border-radius: .8em; overflow: hidden; background: var(--f); break-inside: avoid; }
.msn-pin--anuncio .msn-peludo { position: absolute; left: 5%; top: 8%; width: 90%; height: 65%; }
.msn-pin--anuncio .msn-paquete { position: absolute; right: 10%; bottom: 8%; font-size: .9em; }
.msn-pin__nombre { display: block; margin: -.2em 0 .6em; font-size: .56em; line-height: 1.3; break-inside: avoid; }
.msn-pin__nombre b { display: block; font-size: 1.15em; }
/* YouTube */
.msn-yt__video { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--f); }
.msn-yt__video .msn-peludo { position: absolute; left: 4%; top: 4%; width: 60%; height: 100%; }
.msn-yt__video .msn-paquete { position: absolute; right: 16%; bottom: 14%; font-size: 1em; }
.msn-yt__anuncio { position: absolute; left: .5em; bottom: .7em; padding: .15em .45em; border-radius: .3em; background: #FFCC00; color: #111; font-size: .55em; font-weight: 800; }
.msn-yt__omitir { position: absolute; right: 0; bottom: .9em; padding: .4em .7em; background: rgba(17, 17, 17, .75); color: #fff; font-size: .58em; font-weight: 700; }
.msn-yt__barra { position: absolute; left: 0; bottom: 0; height: .2em; width: 35%; background: #FFCC00; }
.msn-yt__info { display: flex; gap: .6em; padding: .8em; }
.msn-yt__info .msn-avatar { width: 2em; height: 2em; font-size: .85em; }
.msn-yt__info b { display: block; font-size: .78em; line-height: 1.25; }
.msn-yt__info small { font-size: .6em; color: rgba(26, 26, 26, .6); }
.msn-yt__cta { display: block; margin: 0 .8em; padding: .6em; border-radius: 999px; background: #065FD4; color: #fff; text-align: center; font-size: .7em; font-weight: 700; }
.msn-yt__lista { display: grid; gap: .6em; padding: .9em .8em; }
.msn-yt__lista span { height: 3.6em; border-radius: .6em; background: #F2F2F2; }
/* LinkedIn */
.msn-plat--linkedin { background: #F4F2EE; }
.msn-plat--linkedin .msn-post__cabeza { background: #fff; }
.msn-li__texto { margin: 0; padding: 0 .8em .7em; background: #fff; font-size: .66em; line-height: 1.45; }
.msn-plat--linkedin .msn-post__foto { aspect-ratio: 1.3; align-items: center; justify-content: center; padding: 0; gap: .6em; }
.msn-plat--linkedin .msn-post__foto .msn-paquete { position: static; font-size: 1.1em; transform: none; }
.msn-plat--linkedin .msn-post__foto .msn-paquete:nth-child(2) { transform: translateY(-.6em); }
.msn-li__pie { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .7em .8em; background: #fff; }
.msn-li__pie b { display: block; font-size: .7em; }
.msn-li__pie small { font-size: .58em; color: rgba(26, 26, 26, .6); }
.msn-li__pie em { flex: none; padding: .4em .8em; border-radius: 999px; box-shadow: inset 0 0 0 .1em #0A66C2; color: #0A66C2; font-style: normal; font-size: .66em; font-weight: 700; }

/* ---------- fase 4: el público ---------- */
.msn-publico { display: flex; flex-direction: column; align-items: center; padding: 1em .9em; background: #fff; }
.msn-publico__eyebrow { align-self: flex-start; font-size: .62em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-texto); }
.msn-publico__aros { position: relative; width: 9.5em; height: 9.5em; margin: .6em 0 .3em; }
.msn-publico__aros > i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color .5s, box-shadow .5s; box-shadow: inset 0 0 0 .1em rgba(47, 153, 151, .35); }
.msn-publico__aros > i:nth-child(1) { width: 100%; height: 100%; }
.msn-publico__aros > i:nth-child(2) { width: 78%; height: 78%; }
.msn-publico__aros > i:nth-child(3) { width: 56%; height: 56%; }
.msn-publico__aros > i:nth-child(4) { width: 36%; height: 36%; }
.msn-publico__aros[data-n="1"] > i:nth-child(1), .msn-publico__aros[data-n="2"] > i:nth-child(-n+2), .msn-publico__aros[data-n="3"] > i:nth-child(-n+3), .msn-publico__aros[data-n="4"] > i { background: rgba(47, 153, 151, .1); }
.msn-publico__aros[data-n="4"] > i:nth-child(4) { background: var(--ms); box-shadow: 0 0 0 .4em rgba(47, 153, 151, .2); }
.msn-publico__centro { position: absolute; left: 50%; top: 50%; width: 28%; height: 28%; transform: translate(-50%, -50%); }
.msn-publico__cuenta { display: flex; flex-direction: column; align-items: center; }
.msn-publico__cuenta b { font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.msn-publico__cuenta small { font-size: .62em; color: rgba(26, 26, 26, .6); }
.msn-publico__filtros { list-style: none; margin: .8em 0 0; padding: 0; width: 100%; display: grid; gap: .4em; }
.msn-publico__filtros li { display: flex; align-items: center; gap: .55em; padding: .55em .7em; border-radius: .6em; box-shadow: inset 0 0 0 1px #E3E3E3; font-size: .7em; font-weight: 600; opacity: .45; transition: opacity .3s, box-shadow .3s, background-color .3s; }
.msn-publico__filtros li i { flex: none; width: 1.1em; height: 1.1em; border-radius: .3em; box-shadow: inset 0 0 0 .12em #BBB; transition: background-color .3s, box-shadow .3s; }
.msn-publico__filtros li[data-on] { opacity: 1; background: var(--ms-claro); box-shadow: inset 0 0 0 .12em var(--ms); }
.msn-publico__filtros li[data-on] i { background: var(--ms) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: none; }

/* ---------- fase 5: el chat de WhatsApp ---------- */
.msn-chat { display: flex; flex-direction: column; background: #EFE7DD; }
.msn-chat__cabeza { flex: none; display: flex; align-items: center; gap: .55em; padding: .5em .8em .6em; background: #0B6E5E; color: #fff; }
.msn-chat__cabeza .msn-avatar { width: 2em; height: 2em; font-size: .85em; }
.msn-chat__cabeza b { display: block; font-size: .8em; }
.msn-chat__cabeza small { font-size: .6em; opacity: .85; }
.msn-chat__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .35em; padding: .6em; overflow: hidden; }
.msn-chat__origen { align-self: center; margin-bottom: auto; padding: .35em .7em; border-radius: .5em; background: #FFF6C9; font-size: .56em; font-weight: 700; color: rgba(26, 26, 26, .75); }
.msn-chat__origen i { font-style: normal; color: var(--ms-texto); }
.msn-msg { max-width: 84%; padding: .45em .65em; border-radius: .7em; font-size: .66em; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); display: none; }
.msn-msg[data-on] { display: block; animation: msn-msg .35s var(--rebote); }
@keyframes msn-msg { from { opacity: 0; transform: translateY(.8em) scale(.95); } }
.msn-msg--c { align-self: flex-end; background: #D9FDD3; border-bottom-right-radius: .15em; }
.msn-msg--b { align-self: flex-start; background: #fff; border-bottom-left-radius: .15em; }
.msn-msg--r { align-self: flex-start; background: none; box-shadow: none; padding: 0; }
.msn-msg--r[data-on] { display: flex; gap: .35em; }
.msn-msg--r i { padding: .4em .9em; border-radius: 999px; background: #fff; color: #0B6E5E; font-style: normal; font-weight: 700; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); transition: background-color .3s, color .3s; }
.msn-msg--r[data-elegida-on] i[data-elegida] { background: #0B6E5E; color: #fff; }
.msn-msg--prod { width: 62%; padding: .35em; }
.msn-msg--prod b, .msn-msg--prod small { display: block; padding: 0 .3em; }
.msn-msg--prod small { color: rgba(26, 26, 26, .6); }
.msn-msg__img { display: grid; place-items: center; height: 4.4em; margin-bottom: .35em; border-radius: .5em; background: #FFE4EF; }
.msn-msg__img .msn-paquete { font-size: 1.2em; }
.msn-msg--prod em { display: block; margin-top: .35em; padding: .4em; border-top: 1px solid #EEE; text-align: center; font-style: normal; font-weight: 700; color: #0B6E5E; }
.msn-chat__escribe { gap: .25em; padding: .6em .7em; }
.msn-chat__escribe[data-on] { display: flex; }
.msn-chat__escribe i { width: .45em; height: .45em; border-radius: 50%; background: #999; animation: msn-escribe 1s var(--ease) infinite; }
.msn-chat__escribe i:nth-child(2) { animation-delay: .15s; }
.msn-chat__escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes msn-escribe { 30% { transform: translateY(-.3em); opacity: .5; } }
.msn-chat__barra { flex: none; display: flex; align-items: center; gap: .5em; padding: .5em .6em .8em; }
.msn-chat__barra span { flex: 1; padding: .55em .9em; border-radius: 999px; background: #fff; font-size: .64em; color: rgba(26, 26, 26, .45); }
.msn-chat__barra i { width: 2em; height: 2em; border-radius: 50%; background: #0B6E5E; }

/* ---------- fase 6: la publicación de la petfluencer ---------- */
.msn-creador { background: #fff; }
.msn-creador__foto .msn-peludo { left: 14%; width: 78%; height: 78%; }
.msn-creador__foto .msn-paquete { right: 8%; }
.msn-creador__corazon { color: #1A1A1A; transition: color .3s; }
.msn-creador__corazon[data-on] { color: #FF3040; animation: msn-corazon .5s var(--rebote); }
@keyframes msn-corazon { 40% { transform: scale(1.5); } }
.msn-creador__likes { display: block; padding: .15em .8em 0; font-size: .7em; font-variant-numeric: tabular-nums; }
.msn-creador__comentarios { list-style: none; margin: .3em 0 0; padding: 0 .8em; display: grid; gap: .2em; }
.msn-creador__comentarios li { font-size: .62em; line-height: 1.35; opacity: 0; transform: translateY(.5em); transition: opacity .3s, transform .4s var(--ease); }
.msn-creador__comentarios li[data-on] { opacity: 1; transform: none; }

/* ---------- fase 7: el reporte ---------- */
.msn-reporte { display: flex; flex-direction: column; gap: .6em; padding: 1em .9em; background: #fff; }
.msn-reporte__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.msn-reporte__kpis span { padding: .7em .75em; border-radius: .8em; background: #F3F3F3; }
.msn-reporte__kpis small { display: block; font-size: .6em; color: rgba(26, 26, 26, .6); }
.msn-reporte__kpis b { display: block; font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.msn-reporte__kpis .msn-reporte__roas { background: var(--ms); color: #fff; }
.msn-reporte__kpis .msn-reporte__roas small { color: rgba(255, 255, 255, .8); }
.msn-reporte__sub { margin-top: .3em; font-size: .62em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(26, 26, 26, .6); }
.msn-reporte__canales { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.msn-reporte__mejor { display: flex; align-items: center; gap: .6em; margin-top: auto; padding: .55em; border-radius: .8em; background: var(--ms-claro); }
.msn-reporte__mejor > i { flex: none; width: 2.8em; height: 3.6em; border-radius: .5em; overflow: hidden; background: linear-gradient(#FFB23F, #FF7A45); }
.msn-reporte__mejor small { display: block; font-size: .56em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-texto); }
.msn-reporte__mejor b { display: block; font-size: .7em; line-height: 1.25; }
.msn-reporte__mejor em { margin-left: auto; font-style: normal; font-size: .8em; font-weight: 800; color: var(--ms-texto); }
.msn-reporte__canales li { display: grid; grid-template-columns: 6.4em 1fr 2.2em; align-items: center; gap: .5em; font-size: .64em; }
.msn-reporte__canales span { font-weight: 600; white-space: nowrap; }
.msn-reporte__canales i { height: .8em; border-radius: .4em; background: #EEE; overflow: hidden; }
.msn-reporte__canales i::before { content: ''; display: block; height: 100%; width: calc(var(--v) * 2.2% * var(--crece, 0)); border-radius: inherit; background: var(--c); }
.msn-reporte__canales b { text-align: right; }

/* ---------- fase 8: la story con la marca ---------- */
.msn-story { display: flex; flex-direction: column; align-items: center; padding: .9em; overflow: hidden; background: var(--amarillo); text-align: center; }
.msn-story__barras { display: flex; gap: .3em; width: 100%; }
.msn-story__barras i { flex: 1; height: .2em; border-radius: .1em; background: rgba(26, 26, 26, .2); }
.msn-story__barras i:first-child { background: #1A1A1A; }
.msn-story__logo { margin-top: .9em; font-size: 2.3em; }
.msn-story__mancha { position: absolute; left: 50%; top: 48%; width: 13em; height: 11em; border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%; background: var(--magenta); transform: translate(-50%, -50%); animation: msn-respira 5s var(--ease) infinite alternate; }
@keyframes msn-respira { to { border-radius: 42% 58% 45% 55% / 60% 44% 56% 40%; transform: translate(-50%, -50%) rotate(8deg) scale(1.04); } }
.msn-story__perro { position: absolute; left: 50%; top: 48%; width: 10em; height: 10em; transform: translate(-58%, -55%); }
.msn-story__paquete { position: absolute; left: 62%; top: 55%; font-size: 1.5em; transform: rotate(10deg); }
.msn-story__titulo { position: absolute; left: .8em; right: .8em; bottom: 3.6em; font-size: 1.15em; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.msn-story__cta { position: absolute; left: 50%; bottom: 1em; padding: .55em 1.1em; border-radius: 999px; background: #1A1A1A; color: #fff; font-size: .72em; font-weight: 700; transform: translateX(-50%); white-space: nowrap; }

/* ---------- notas alrededor del celular ---------- */
.msn__notas { list-style: none; margin: 0; padding: 0; pointer-events: none; z-index: 4; }
.msn__nota {
	position: absolute; padding: .55em 1.1em .6em; border-radius: 999px; white-space: nowrap;
	font-size: clamp(13px, 1.15vw, 16px); font-weight: 700; background: #111; color: #fff;
	--tx: -100%;
	opacity: 0; transform: translate(var(--tx), -50%) scale(.3); transition: opacity .3s, transform .6s var(--rebote);
}
.msn__nota[data-on] { opacity: 1; transform: translate(var(--tx), -50%) scale(1); }
.msn__nota--1 { background: var(--ms); --tx: 0%; }
.msn__nota--2 { background: var(--magenta); }
.msn__nota--0 { left: calc(50% - var(--wc) / 2 - 28px); top: 26%; }
.msn__nota--1 { left: calc(50% + var(--wc) / 2 + 28px); top: 46%; }
.msn__nota--2 { left: calc(50% - var(--wc) / 2 - 28px); top: 70%; }
/* Fase 1: las notas van alrededor de la ventana de computador (sobre sus bordes; a los costados en pantallas anchas). */
@media (min-width: 701px) {
	.msn__escena[data-fase="1"] .msn__nota--0 { left: calc(50% - var(--wpc) / 2); top: 22%; --tx: -50%; }
	.msn__escena[data-fase="1"] .msn__nota--1 { left: calc(50% + var(--wpc) / 2); top: 46%; --tx: -50%; }
	.msn__escena[data-fase="1"] .msn__nota--2 { left: calc(50% - var(--wpc) / 2 + 30px); top: 76%; --tx: -50%; }
}
@media (min-width: 1420px) {
	.msn__escena[data-fase="1"] .msn__nota--0, .msn__escena[data-fase="1"] .msn__nota--2 { left: calc(50% - var(--wpc) / 2 - 22px); --tx: -100%; }
	.msn__escena[data-fase="1"] .msn__nota--1 { left: calc(50% + var(--wpc) / 2 + 22px); --tx: 0%; }
}

/* ---------- fases 3 y 6: plataformas y petfluencers alrededor ---------- */
.msn__alrededor { pointer-events: none; z-index: 4; }
.msn__alrededor ul { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.msn__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.msn__lineas line {
	stroke: var(--ms-texto); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 7;
	opacity: 0; transition: opacity .4s; animation: msn-datos 1.1s linear infinite;
}
.msn__lineas line[data-on] { opacity: .35; }
.msn__lineas line[data-activo] { opacity: .9; stroke: var(--ms); stroke-width: 2.2; }
@keyframes msn-datos { to { stroke-dashoffset: -20; } }
.msn__chip {
	position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px;
	background: #fff; box-shadow: 0 10px 26px rgba(17, 17, 17, .12), 0 0 0 1px rgba(17, 17, 17, .05); white-space: nowrap; text-align: left;
	--tx: -100%;
	opacity: 0; transform: translate(var(--tx), -50%) scale(.6); transition: opacity .35s, transform .6s var(--rebote), box-shadow .3s;
}
.msn__chip[data-on] { opacity: 1; transform: translate(var(--tx), -50%) scale(1); }
.msn__chip[data-on][data-atenuado] { opacity: .45; }
.msn__chip[data-activo] { box-shadow: 0 14px 30px rgba(17, 17, 17, .18), 0 0 0 2px var(--ms); transform: translate(var(--tx), -50%) scale(1.08); }
.msn__chip b { display: block; font-size: 13.5px; }
.msn__chip small { display: block; font-size: 11.5px; color: rgba(17, 17, 17, .6); }
.msn__chip-icono { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; }
.msn__chip .msn-avatar { width: 36px; height: 36px; font-size: 13px; }
.msn__creador em { margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: var(--ms-claro); color: var(--ms-texto); font-style: normal; font-size: 12px; font-weight: 800; }
/* Tres a cada lado del celular. */
.msn__chip--0, .msn__chip--1, .msn__chip--2 { left: calc(50% - var(--wc) / 2 - 56px); }
.msn__chip--3, .msn__chip--4, .msn__chip--5 { left: calc(50% + var(--wc) / 2 + 56px); --tx: 0%; }
.msn__chip--0, .msn__chip--3 { top: 16%; }
.msn__chip--1, .msn__chip--4 { top: 50%; }
.msn__chip--2, .msn__chip--5 { top: 84%; }
.msn__chip--1 { left: calc(50% - var(--wc) / 2 - 96px); }
.msn__chip--4 { left: calc(50% + var(--wc) / 2 + 96px); }

/* ---------- fase 8: piezas de marca alrededor ---------- */
.msn__piezas { list-style: none; margin: 0; padding: 0; pointer-events: none; z-index: 4; }
.msn__pieza {
	position: absolute; display: flex; flex-direction: column; gap: 6px; font-size: 12px;
	--tx: -100%;
	opacity: 0; transform: translate(var(--tx), -50%) scale(.7) rotate(var(--giro, 0deg)); transition: opacity .35s, transform .7s var(--rebote);
}
.msn__pieza[data-on] { opacity: 1; transform: translate(var(--tx), -50%) rotate(var(--giro, 0deg)); }
.msn__pieza small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(17, 17, 17, .55); }
.msn__pieza-arte { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--f); box-shadow: 0 16px 36px rgba(17, 17, 17, .18); }
.msn__pieza-arte .msn-logo { position: absolute; left: 10px; top: 10px; font-size: 18px; }
.msn__pieza-arte .msn-peludo { position: absolute; }
.msn__pieza-arte em { position: absolute; font-style: normal; font-weight: 800; }
.msn__pieza--post { left: calc(50% - var(--wc) / 2 - 40px); top: 28%; --giro: -4deg; }
.msn__pieza--post .msn-logo { color: var(--amarillo); }
.msn__pieza--post .msn__pieza-arte { width: 150px; height: 150px; }
.msn__pieza--post .msn-peludo { left: 20px; bottom: -10px; width: 115px; height: 115px; }
.msn__pieza--post em { right: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: var(--amarillo); color: #111; font-size: 13px; }
.msn__pieza--pin { left: calc(50% + var(--wc) / 2 + 40px); top: 34%; --tx: 0%; --giro: 3deg; }
.msn__pieza--pin .msn__pieza-arte { width: 120px; height: 180px; }
.msn__pieza--pin .msn-peludo { left: 8px; top: 40px; width: 104px; height: 104px; }
.msn__pieza--pin em { left: 10px; right: 10px; bottom: 10px; font-size: 13px; line-height: 1.1; color: var(--magenta); }
.msn__pieza--banner { left: calc(50% - var(--wc) / 2 - 40px); top: 78%; --giro: 2deg; }
.msn__pieza--banner .msn__pieza-arte { width: 256px; height: 70px; }
.msn__pieza--banner .msn-peludo { left: 6px; top: 4px; width: 62px; height: 62px; }
.msn__pieza--banner .msn-logo { left: 74px; top: 24px; font-size: 20px; }
.msn__pieza--banner em { right: 10px; top: 22px; padding: 5px 10px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 12px; }
.msn__pieza--wa { left: calc(50% + var(--wc) / 2 + 40px); top: 80%; --tx: 0%; --giro: -2deg; }
.msn__pieza--wa .msn__pieza-arte { display: flex; align-items: center; gap: 12px; width: 210px; padding: 10px; box-sizing: border-box; box-shadow: 0 16px 36px rgba(17, 17, 17, .18), inset 0 0 0 1px #EEE; }
.msn__pieza--wa .msn-paquete { font-size: 19px; }
.msn__pieza--wa .msn__pieza-arte > span:not(.msn-paquete) > b { display: block; font-size: 13px; }
.msn__pieza--wa em { position: static; color: #0B6E5E; font-size: 13px; }

/* ---------- progreso y pista ---------- */
.msn__progreso { position: absolute; left: 50%; bottom: clamp(14px, 3svh, 28px); width: min(160px, 40vw); height: 3px; border-radius: 3px; background: rgba(127, 127, 127, .25); transform: translateX(-50%); }
.msn__progreso span { display: block; height: 100%; border-radius: inherit; background: var(--ms); transform-origin: left; transform: scaleX(var(--p, 0)); }
.msn__escena[data-fase="0"] .msn__progreso span { background: #fff; }
.msn__pista { position: absolute; left: 50%; bottom: calc(clamp(14px, 3svh, 28px) + 14px); transform: translateX(-50%); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; transition: opacity .4s; }
.msn__escena:not([data-fase="0"]) .msn__pista { opacity: 0; }

/* ---------- add-ons (después del escenario, sección normal) ---------- */
.msa { background: #fff; padding: clamp(72px, 10vw, 140px) 16px; }
.msa__cabeza { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.msa__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1D7472; }
.msa__titulo { margin: 10px auto 0; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: #111; }
.msa__texto { margin: 14px auto 0; max-width: 48ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; opacity: .75; }
.msa__grilla { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.msa__item { padding: 28px; border-radius: 24px; background: #F3F3F3; border: 1px solid rgba(17, 17, 17, .06); transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s; }
.msa__item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17, 17, 17, .08); }
.msa__icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #2F9997; color: #fff; }
.msa__icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.msa__nombre { margin: 18px 0 8px; font-family: var(--koi-font-texto); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: #111; }
.msa__item p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .72; }
.msa__cta { margin-top: 40px; text-align: center; }

/* ---------- pantallas medianas: lo de alrededor más pegado al celular ---------- */
@media (max-width: 1100px) {
	.msn__chip--1 { left: calc(50% - var(--wc) / 2 - 56px); }
	.msn__chip--4 { left: calc(50% + var(--wc) / 2 + 56px); }
}

/* ---------- celular: lo de alrededor va montado sobre el borde del celular ---------- */
@media (max-width: 700px) {
	.msn__escena { --zona-arriba: calc(var(--tope) + 104px); --zona-abajo: clamp(120px, 16svh, 150px); --wc: min(calc(var(--hc) * .52), 64vw); }
	.msn__abajo { bottom: clamp(44px, 8svh, 80px); font-size: 14px; }
	/* Las notas van de a una, montadas sobre el borde de arriba del celular: cada nueva reemplaza a la anterior. */
	.msn__nota { left: 50% !important; top: 2% !important; font-size: 12px; --tx: -50% !important; }
	.msn__nota[data-on]:not([data-ultima]) { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
	.msn__chip { gap: 5px; padding: 4px 9px 4px 4px; }
	.msn__chip b { font-size: 11px; }
	.msn__chip small { display: none; }
	.msn__chip-icono, .msn__chip .msn-avatar { width: 22px; height: 22px; font-size: 10px; }
	.msn__creador em { font-size: 10px; padding: 2px 6px; }
	/* Plataformas y petfluencers: una fila sobre el borde de arriba del celular y otra sobre el de abajo. */
	.msn__chip { --tx: -50% !important; max-width: 31vw; }
	.msn__chip > span:nth-child(2) { min-width: 0; }
	.msn__chip b { overflow: hidden; text-overflow: ellipsis; }
	.msn__creador em { display: none; }
	.msn__chip--0, .msn__chip--3 { left: 18% !important; }
	.msn__chip--1, .msn__chip--4 { left: 50% !important; }
	.msn__chip--2, .msn__chip--5 { left: 82% !important; }
	.msn__chip--0, .msn__chip--1, .msn__chip--2 { top: 3%; }
	.msn__chip--3, .msn__chip--4, .msn__chip--5 { top: 97%; }
	.msn__pieza { font-size: 10px; }
	.msn__pieza small { display: none; }
	/* Pegadas a los bordes de la pantalla, montadas sobre el celular. */
	.msn__pieza--post, .msn__pieza--banner { left: 10px; --tx: 0%; }
	.msn__pieza--pin, .msn__pieza--wa { left: calc(100% - 10px); --tx: -100%; }
	.msn__pieza--banner em { display: none; }
	.msn__pieza--post { top: 18%; }
	.msn__pieza--pin { top: 40%; }
	.msn__pieza--banner { top: 93%; }
	.msn__pieza--wa { top: 66%; }
	.msn__pieza--post .msn__pieza-arte { width: 92px; height: 92px; }
	.msn__pieza--post .msn-peludo { left: 12px; width: 72px; height: 72px; }
	.msn__pieza--post em { font-size: 10px; right: 6px; bottom: 6px; }
	.msn__pieza-arte .msn-logo { font-size: 12px; left: 7px; top: 7px; }
	.msn__pieza--pin .msn__pieza-arte { width: 76px; height: 114px; }
	.msn__pieza--pin .msn-peludo { left: 4px; top: 26px; width: 68px; height: 68px; }
	.msn__pieza--pin em { font-size: 9px; left: 7px; bottom: 7px; }
	.msn__pieza--banner .msn__pieza-arte { width: 150px; height: 46px; }
	.msn__pieza--banner .msn-peludo { width: 40px; height: 40px; top: 3px; }
	.msn__pieza--banner .msn-logo { left: 48px; top: 16px; font-size: 13px; }
	.msn__pieza--banner em { font-size: 9px; top: 14px; right: 7px; padding: 3px 7px; }
	.msn__pieza--wa .msn__pieza-arte { width: 140px; gap: 8px; padding: 7px; }
	.msn__pieza--wa .msn-paquete { font-size: 11px; }
	.msn__pieza--wa .msn__pieza-arte > span:not(.msn-paquete) > b, .msn__pieza--wa em { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.msn__escena, .msn__escena * { transition-duration: .01s !important; animation: none !important; }
}

/* Computadoras con pantalla baja (notebooks): título y párrafo más chicos y zonas ajustadas,
   para que el dispositivo del centro no quede pegado al título ni tapado por el párrafo. */
@media (min-width: 701px) and (max-height: 850px) {
	.msn__escena {
		--tope: calc(var(--alto-menu, 66px) + clamp(8px, 2svh, 24px));
		--zona-arriba: calc(var(--tope) + clamp(84px, 15svh, 128px)); --zona-abajo: clamp(120px, 21svh, 180px);
	}
	.msn__eyebrow { font-size: 12px; }
	.msn__titulo { margin-top: 6px; font-size: clamp(22px, min(2.7vw, 4.8svh), 40px); }
	.msn__abajo { bottom: clamp(56px, 9svh, 90px); font-size: clamp(14px, min(1.1vw, 2.2svh), 16px); line-height: 1.55; }
}

/* Pantallas bajas (notebooks chicas): en "La base" el título va en una línea y el párrafo más abajo,
   para que la ventana de computador tenga casi todo el alto (igual que en PawCode). */
@media (min-width: 701px) and (max-height: 760px) {
	.msn__escena[data-fase="1"] { --zona-arriba: calc(var(--tope) + 58px); --zona-abajo: 84px; }
	.msn__arriba[data-texto="1"] { max-width: none; }
	.msn__arriba[data-texto="1"] .msn__titulo { max-width: none; white-space: nowrap; font-size: clamp(18px, min(2.3vw, 4.4svh), 28px); }
	.msn__abajo[data-texto="1"] { bottom: 34px; max-width: 920px; font-size: 14px; line-height: 1.4; }
}

/* ---------- hero: párrafo + dos CTA (doc de Carlos, 2026-10-04), mismo patrón que BrandPet ----------
   En la intro MediaSnout se achica para que entren el párrafo y los botones; los demás textos no reciben clics.
   + 31px: arriba del todo el escenario empieza debajo de la barra verde (topbar). */
.msn__escena[data-fase="0"] .msn__intro { justify-content: flex-start; padding-top: calc(var(--tope) + clamp(96px, 17svh, 150px)); box-sizing: border-box; gap: 1.6svh; }
.msn__escena[data-fase="0"] .msn__nombre { font-size: min(11vw, 15svh); }
.msn__escena[data-fase="0"] .msn__eq { height: 5svh; }
.msn__abajo.msn__abajo--intro { bottom: calc(31px + clamp(16px, 3svh, 32px)); max-width: 640px; }
.msn__abajo--intro p { margin: 0; }
.msn__escena[data-fase="0"] .msn__abajo--intro[data-texto="0"], .msn__escena .msn__abajo--intro[data-on] { opacity: .95; pointer-events: auto; }
.msn__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; margin-top: 16px; }
.msn__cta {
	display: inline-flex; padding: 13px 26px; border-radius: 999px;
	background: #fff; color: #2F9997; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 10px 24px rgba(17, 17, 17, .14); transition: transform .25s var(--ease), box-shadow .25s;
}
.msn__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 17, 17, .2); color: #2F9997; }
.msn__ver { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .85; white-space: nowrap; }
.msn__ver:hover { opacity: 1; color: inherit; }
/* Ancla de "Mira cómo funciona": justo donde arranca la base. */
.msn__mira { position: absolute; top: 6.6%; left: 0; width: 1px; height: 1px; }
@media (max-width: 700px) {
	.msn__escena[data-fase="0"] .msn__intro { padding-top: calc(var(--tope) + 120px); }
	.msn__abajo.msn__abajo--intro { bottom: calc(31px + 12px); font-size: 14px; line-height: 1.45; }
	.msn__acciones { margin-top: 10px; gap: 6px; flex-direction: column; }
	.msn__cta { padding: 12px 22px; font-size: 13px; }
	.msn__ver { font-size: 11px; }
}
@media (min-width: 701px) and (max-height: 850px) {
	.msn__escena[data-fase="0"] .msn__intro { padding-top: calc(var(--tope) + clamp(80px, 15svh, 120px)); }
	.msn__escena[data-fase="0"] .msn__nombre { font-size: min(10vw, 13svh); }
	.msn__abajo.msn__abajo--intro { bottom: calc(31px + clamp(10px, 2svh, 20px)); }
	.msn__acciones { margin-top: 12px; }
}

/* ---------- cierre de la animación (como la banda rosa de BrandPet, en el teal de MediaSnout) ---------- */
.msc { background: #2F9997; color: #fff; text-align: center; padding: clamp(64px, 9vw, 120px) 16px; }
.msc__titulo {
	margin: 0 auto 28px; max-width: 24ch; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none;
	font-size: clamp(30px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -.02em; color: #fff;
}
.msc__titulo span { display: block; color: var(--pawnia-lima, #C7F964); }
.msc .koi-btn { background: #fff; color: #2F9997; }
.msc .koi-btn:hover { background: var(--pawnia-lima, #C7F964); color: #111; }
.msa__cta p { margin: 0 0 16px; font-size: clamp(15px, 1.25vw, 18px); opacity: .75; }

/* Intro: kit de medios en lugar del ecualizador (Santiago, 2026-10-05: "lo mismo que en PawCode y BrandPet"). */
.msn__kit { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.msn__kit-play { display: grid; place-items: center; width: clamp(34px, 5svh, 48px); height: clamp(34px, 5svh, 48px); border-radius: 50%; background: #fff; animation: msn-kit-latido 1.6s ease-in-out infinite; }
.msn__kit-play svg { width: 60%; height: 60%; fill: #2F9997; }
@keyframes msn-kit-latido { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); } }
.msn__kit-visor { position: relative; display: grid; place-items: center; width: clamp(64px, 9svh, 88px); height: clamp(40px, 5.6svh, 54px); }
.msn__kit-visor i { position: absolute; width: 12px; height: 12px; border: 0 solid #fff; animation: msn-kit-enfoque 2.4s ease-in-out infinite; }
.msn__kit-visor i:nth-child(1) { left: 0; top: 0; border-width: 2.5px 0 0 2.5px; }
.msn__kit-visor i:nth-child(2) { right: 0; top: 0; border-width: 2.5px 2.5px 0 0; }
.msn__kit-visor i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2.5px 2.5px; }
.msn__kit-visor i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2.5px 2.5px 0; }
.msn__kit-visor b { font: 800 13px/1 var(--koi-font-body, sans-serif); letter-spacing: .1em; color: #fff; }
@keyframes msn-kit-enfoque { 50% { transform: scale(.75); } }
.msn__kit-visor i:nth-child(1) { transform-origin: 0 0; } .msn__kit-visor i:nth-child(2) { transform-origin: 100% 0; }
.msn__kit-visor i:nth-child(3) { transform-origin: 0 100%; } .msn__kit-visor i:nth-child(4) { transform-origin: 100% 100%; }
.msn__kit-sube { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; color: #2F9997; font-size: 13px; font-weight: 800; animation: msn-kit-sube 2.4s ease infinite; }
.msn__kit-sube svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes msn-kit-sube { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .msn__kit-play, .msn__kit-visor i, .msn__kit-sube { animation: none; } }